LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
I'm looking for a fancy chinese restaurant in New York.
CSS
*, *:before, *:after {
  box-sizing: border-box;
  transition: .25s ease-in-out;
}

*::selection {
  background: #ff202f;
  color: white;
}

body {
  background-color: #04b8ad;
}

form {
  max-width: 500px;
  margin: 100px auto 0 auto;
  font-family: roboto;
  font-weight: 200;
  font-size: 40px;
  line-height: 60px;
  color: white;
}
form .input-container {
  border-bottom: 1px dashed #007a73;
  color: #007a73;
  padding: 6px;
  margin-left: -6px;
  margin-right: -6px;
  display: inline-block;
  position: relative;
}
form .input-container.no-overflow {
  max-width: 100%;
}
form .input-container.no-overflow .input {
  max-width: 100%;
}
form .input-container.no-overflow .input input {
  max-width: 100%;
}
form .input-container:hover {
  border-bottom: 1px dashed #004f4a;
  color: #004f4a;
  cursor: pointer;
}
form .input-container.active {
  z-index: 5000;
  border-bottom: 1px dashed #004f4a;
  color: #004f4a;
  cursor: default;
}
form .input-container.active:before {
  content: '';
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
form .input-container.active .input {
  visibility: visible;
  opacity: 1;
}
form .input-container .newOption {
  padding: 6px 46px 6px 6px;
  background: white;
  position: relative;
}
form .input-container .newOption:hover {
  background: #ff202f;
  color: white;
}
form .input-container .newOption:hover:after {
  color: white !important;
}
form .input-container .newOption.selected:after {
  content: '\f00c';
  font-family: FontAwesome;
  color: #ff202f;
  display: block;
  top: 0;
  right: 0;
  height: 72px;
  width: 46px;
  font-size: 20px;
  text-align: center;
  line-height: 72px;
  position: absolute;
}
form .input-container .placeholder {
  position: relative;
  z-index: 1;
}
form .input-container .input {
  display: block;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
}
form input[type="text"], form select[type="text"] {
  border: none;
  outline: none;
  margin: 0;
  padding: 6px;
  font-weight: 200;
  font-size: 40px;
  line-height: 60px;
  display: block;
}
form input.hidden, form select.hidden {
  position: absolute;
  left: -5000px;
}
form button {
  display: block;
  background: white;
  border: none;
  padding: 10px 55px 10px 20px;
  font-size: 30px;
  font-weight: 200;
  margin: 30px 0 0 0;
  box-shadow: inset 0px 0px 0px #ff202f;
  position: relative;
}
form button i {
  transition: 0s 0s ease-in-out;
}
form button:after {
  content: '\f105';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 55px;
  width: 55px;
  font-family: FontAwesome;
  line-height: 55px;
  text-align: center;
  color: #ff202f;
}
form button:hover {
  box-shadow: inset 350px 0 0 #ff202f;
  color: white;
  cursor: pointer;
}
form button:hover:after {
  color: white;
}
JS
// show and hide styled inputs, update natural language statement
$('.input-container').click(function() {
  var target = $(this);
  var targetInput = $(this).find('input');
  var targetSelect = $(this).find('select');
  var styledSelect = $(this).find('.newSelect');
  target.addClass('active');
  targetInput.focus();
  targetInput.change(function() {
    var inputValue = $(this).val();
    var placeholder = target.find('.placeholder')
    target.removeClass('active');
    placeholder.html(inputValue);
  });
  targetSelect.change(function() {
    var inputValue = $(this).val();
    var placeholder = target.find('.placeholder')
    target.removeClass('active');
    placeholder.html(inputValue);
  });
  styledSelect.click(function() {
    var target = $(this);
    setTimeout(function() {
      target.parent().parent().removeClass('active');
    }, 10);
  });
});

// style selects

// Create the new select
var select = $('.fancy-select');
select.wrap('
'); $('.newSelect').prepend('
'); //populate the new select select.each(function() { var selectOption = $(this).find('option'); var target = $(this).parent().find('.newOptions'); selectOption.each(function() { var optionContents = $(this).html(); var optionValue = $(this).attr('value'); target.append('
' + optionContents + '
') }); }); // new select functionality var newSelect = $('.newSelect'); var newOption = $('.newOption'); // update based on selection newOption.on('mouseup', function() { var OptionInUse = $(this); var siblingOptions = $(this).parent().find('.newOption'); var newValue = $(this).attr('data-value'); var selectOption = $(this).parent().parent().find('select option'); // style selected option siblingOptions.removeClass('selected'); OptionInUse.addClass('selected'); // update the actual input selectOption.each(function() { var optionValue = $(this).attr('value'); if (newValue == optionValue) { $(this).prop('selected', true); } else { $(this).prop('selected', false); } }) }); newSelect.click(function() { var target = $(this); target.parent().find('select').change(); });
Host Instantly Drag and Drop Website Builder

 

Description

Why use stupid boxed form elements when we can ask our users to simply complete a sentence in natural language? Inspired by this Medium article: https://medium.com/@saijogeorge/creative-form-input-field-design-examples-bfe5dd50808a
Term
Mon, 11/27/2017 - 21:53

Related Codes

Pen ID
Pen ID
Pen ID