Tripadvisor input highlight

index.html

<div id="root"></div>

script.babel

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      inputValue: ''
    };
    
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(e) {
    const { value } = e.target;

    this.setState({
      inputValue: value
    });
  }

  render() {
    const { inputValue } = this.state;
    
    return (
      <div className='input-wrapper'>
        <input
          onChange={this.onInputChange}
          placeholder='Search...'
          value={inputValue}
          spellCheck={false}
          />
        <span className='input-highlight'>
          { inputValue.replace(/ /g, "\u00a0") }
        </span>
      </div>
    );
  }
}

ReactDOM.render(
	<App />,
  document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>

style.scss

// PEN BY PETR GAZAROV
// -- https://github.com/petrgazarov -- 

$input-font-size: 30px;
$input-line-height: 70px;
$font-family: Roboto Slab, sans-serif;

body {
  background-color: #222222;
}

.input-wrapper {
  position: relative;
  width: 500px;
  margin: 50px auto;
}

.input-highlight {
  font-size: $input-font-size;
  user-select: none;
  line-height: $input-line-height;
  border-top: 3px solid white;
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  height: 0;
  color: transparent;
  font-family: $font-family;
}

input {
  height: 60px;
  width: 100%;
  min-width: 100%;
  padding: 0;
  border-radius: 0;
  line-height: $input-line-height;
  background-color: transparent;
  color: white;
  font-size: $input-font-size;
  border: none;
  outline: none;
  border-bottom: 3px solid #333333;
  font-family: $font-family;

  &:focus {
    + .input-highlight {
      border-top: 3px solid #fbc91b;
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" />

tripadvisor-input-highlight.markdown

Tripadvisor input highlight

An input highlight inspired by Tripadvisor (https://www.tripadvisor.com/)

A Pen by Petr Gazarov on CodePen.

License.