Input with Dropdown - Time
Native HTML dropdown attached to input element, no CSS or JS required.
Demo
HTML
<!-- `list="appointments"` on the `input` connects to `id="appointments"` on the `datalist` -->
<label for="appointment">Appointment</label>
<input type="time"
id="appointment"
name="appointment"
list="appointments" />
<datalist id="appointments">
<option value="10:00">Morning</option>
<option value="13:00">Afternoon</option>
<option value="18:00">Evening</option>
</datalist>CSS
No special CSS required.JS
No JS required.Baseline
CodePen
See the Pen on CodePen.