Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Style form controls with one line of CSS
Changes checkboxes, radio buttons, and range sliders
Much simpler than custom styling
Automatically adjusts contrast for accessibility
Works with your brand colors
Supported in all modern browsers
accent-color lets you change the color with just one line!Changes the check color and background
input[type='checkbox'] { accent-color: blue; }Changes the dot color and ring
input[type='radio'] { accent-color: green; }Changes the filled track color
input[type='range'] { accent-color: red; }Changes the progress bar color
progress { accent-color: purple; }/* Change all form controls to your brand color */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
accent-color: #3b82f6;
}
/* Or use any color format */
input {
accent-color: rgb(59, 130, 246);
accent-color: hsl(217, 91%, 60%);
accent-color: blue;
}/* Checkboxes - Blue */
input[type="checkbox"] {
accent-color: #3b82f6;
}
/* Radio buttons - Green */
input[type="radio"] {
accent-color: #10b981;
}
/* Range sliders - Purple */
input[type="range"] {
accent-color: #8b5cf6;
}/* Set accent color for entire page */
:root {
accent-color: #3b82f6;
}
/* All checkboxes, radios, and sliders
will automatically use this color! */<div class="container">
<h2>Choose Your Features</h2>
<label class="option">
<input type="checkbox" class="blue" checked>
<span>Dark Mode (Blue accent)</span>
</label>
<label class="option">
<input type="checkbox" class="green" checked>
<span>Notifications (Green accent)</span>
</label>
<label class="option">
<input type="checkbox" class="purple">
<span>Premium Features (Purple accent)</span>
</label>
<label class="option">
<input type="checkbox" class="pink" checked>
<span>Newsletter (Pink accent)</span>
</label>
</div>Loading preview...
<div class="container">
<h2>Select Your Plan</h2>
<label class="plan-option">
<input type="radio" name="plan" value="free" class="gray" checked>
<div class="plan-details">
<strong>Free</strong>
<span>$0/month</span>
</div>
</label>
<label class="plan-option">
<input type="radio" name="plan" value="basic" class="blue">
<div class="plan-details">
<strong>Basic</strong>
<span>$9/month</span>
</div>
</label>
<label class="plan-option">
<input type="radio" name="plan" value="pro" class="purple">
<div class="plan-details">
<strong>Pro</strong>
<span>$29/month</span>
</div>
</label>
<label class="plan-option">
<input type="radio" name="plan" value="enterprise" class="amber">
<div class="plan-details">
<strong>Enterprise</strong>
<span>$99/month</span>
</div>
</label>
</div>Loading preview...
<div class="container">
<h2>Volume Controls</h2>
<div class="slider-group">
<label>
Master Volume
<span class="value">50%</span>
</label>
<input type="range" class="blue" value="50">
</div>
<div class="slider-group">
<label>
Music
<span class="value">75%</span>
</label>
<input type="range" class="green" value="75">
</div>
<div class="slider-group">
<label>
Effects
<span class="value">25%</span>
</label>
<input type="range" class="purple" value="25">
</div>
</div>Loading preview...
Match form controls to your brand colors easily
Style forms without complex custom CSS
Use different colors to indicate different options
Accent colors work great in light and dark themes
:root for site-wide consistency✅ Good Modern Support: The accent-color property works in Chrome 93+, Firefox 92+, Safari 15.4+, and Edge 93+. For older browsers, form controls will just use the default blue color.