Advanced Input Types & Custom Controls
Lesson 19 • Advanced Track
What You'll Learn
All HTML5 input types: range, color, date, time, search
Style range sliders with CSS (track and thumb)
Custom checkboxes and radio buttons
The datalist element for autocomplete suggestions
Style the color picker input
Build custom toggle switches with CSS only
💡 Think of It Like This
HTML5 input types are like specialised tools. A text input is a Swiss Army knife — works for everything but nothing perfectly. A type="date" input is a calendar. A type="color" is a paint palette. Using the right input type gives users the best native controls for each data type.
| Input Type | What It Shows | Mobile Keyboard |
|---|---|---|
range | Slider control | N/A |
color | Color picker popup | N/A |
date | Calendar date picker | Date wheel |
time | Time selector | Time wheel |
datetime-local | Date + time combined | Date + time |
search | Searchable text with clear button | Search keyboard |
tel | Phone number input | Numeric pad |
url | URL input with validation | .com keyboard |
HTML5 Input Types Gallery
Try every HTML5 input type in one interactive demo.
All HTML5 Input Types
Interactive gallery of every modern input type
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Input Types</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
}
.input-card {
background: #1e293b;
padding: 15px;
border-radius: 8px;
}
lab
...Custom Toggle Switch & Styled Checkbox
Build beautiful custom controls using only CSS — no JavaScript needed.
Custom CSS Controls
Toggle switches and styled checkboxes with pure CSS
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Controls</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h2 { color: #3b82f6; margin: 25px 0 15px; }
/* === TOGGLE SWITCH === */
.toggle-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
margin: 10px 0;
font-size: 15px;
...⚠️ Common Mistakes
- Using type="text" for everything — Use the right input type (email, tel, url, number) so mobile users get the right keyboard and browsers validate automatically.
- Hiding native inputs without preserving accessibility — Use
display: noneon the input but keep it inside a<label>so clicking the custom control still toggles the real input. - Forgetting :focus-visible on custom controls — Keyboard users need visible focus indicators on custom checkboxes and toggles.
- Not providing a datalist fallback — The datalist element degrades gracefully to a normal text input in unsupported browsers.
🎉 Lesson Complete
You can now use and style every HTML5 input type:
- ✅ Use specialised input types (range, color, date, search) for better UX
- ✅ Build custom toggle switches, checkboxes, and radios with pure CSS
- ✅ Use
<datalist>for autocomplete suggestions - ✅ Always keep custom controls accessible with labels and focus indicators
Sign up for free to track which lessons you've completed and get learning reminders.