waylonrobert waylonrobert - 1 month ago 9
CSS Question

How can I make my search input field function like Pitchfork's unique search?

On https://pitchfork.com and https://pitchfork.com/artists/, they have a really interesting search input. As you type, a red border follows what you type. I'd like to recreate this. Any ideas on how this is done?

Answer Source

This might help you get started...

$("#input").keyup(function(event) {
  var input = $(this).val();
  $("#border").text(input);
});
div {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding-bottom: 2px;
}

input,
span {
  font-size: 16px;
  font-family: arial;
}

input {
  border: none;
  border-bottom: 1px solid #F4F4F4;
}

span {
  position: absolute;
  top: 2px;
  left: 2px;
  color: transparent;
  border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input id="input" type="text">
  <span id="border"></span>
</div>