UIUX Component

Autocomplete input only in HTML. Try the demo below, click on it or simply type anything. DEMO HTML < input list = "sampleInput" placeholder = "Select Metal Band" /> < datalist id = "sampleInput" > < option value = "Metallica" > < option value = "Slayer" > < option value = "Megadeth" > < option value = "Iron Maiden" > < option value = "Anthrax" > < option value = "Slipknot" > < option value = "Pantera" > < option value = "Rammstein" > < option value = "System of a Down" > </ datalist >

  Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }

Native <input type="date" /> in HTML, there's several other options for specifying a date/time, handy examples below on how to use them. Note - Safari not supported. DEMO - Date HTML < input type = "date" > DEMO - Month HTML < input type = "month" > DEMO - Week HTML < input type = "week" > DEMO - Date and Time HTML < input type = "datetime-local" >