<div id="root">
  
</div>
* {
  box-sizing: border-box;
  outline:none;
  border:none
}

.erasable-input .erase-btn {
  position: absolute;
  font-weight:bolder;
  cursor:pointer;
  font-size: 1.5em;
  right: 0;
  top: 0;
  width: 15%;
  height: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: color .25s;
}

.erasable-input .erase-btn:hover {
  color:red;
}

.erasable-input {
  position:relative;
  display:inline-block;
  width: 250px;
  height: 50px;
}

.erasable-input input {
  padding: 0 30px 0 15px;
  transition: all .25s;
  width: 100%;
  height: 100%;
  color:black;
  border: 2px solid rgba(0,0,0,0.5);
}

class App extends React.Component {
  render() {
    return <ErasableInput onChange={value => console.log(value)} />;
  }
}

class ErasableInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.erase = this.erase.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });

    if (this.props.onChange) this.props.onChange(event.target.value);
  }

  erase() {
    this.setState({
      value: ""
    });

    if (this.props.onChange) this.props.onChange("");
  }

  render() {
    const value = this.state.value;
    const empty = value.length === 0;

    return (
      <div className="erasable-input">
        <input
          type="text"
          onChange={this.handleChange}
          value={this.state.value}
        />
        {!empty && (
          <span className="erase-btn" onClick={this.erase}>
            &times;
          </span>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js
  3. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js