<div class="form-group">
  <label for="fruits">Choose a fruit:</label>
  <input list="fruit-options" name="fruits" id="fruits-input" placeholder="Fruit options">

  <datalist id="fruit-options">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Durian">
    <option value="Elderberry">
    <option value="Fig">
    <option value="Grape">
    <option value="Honeydew">
  </datalist>
</div>

* {
  box-sizing: border-box;
}

html {
  padding: 0;
}

::selection {
  background: green;
  color: white
}

body {
  display: flex;
  justify-content: center; 
  align-items: center;  
  min-height: 100vh;
}

.form-group {
  width: 100%;
  max-width: 500px;
  padding: 2rem;
  border-radius: .5rem;
  background-color: #eee;
}

label {
  display: block;
  margin-bottom: .5rem;
}

input {
  border: 1px solid #ccc;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: .3rem;
  width: 100%;
}

input:focus {
  outline-color: green;
  outline-offset: 4px;
}