Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Style checkboxes to match your brand
Create custom radio buttons with any shape
Design beautiful file upload buttons
Make range sliders look modern
Use appearance: none to remove browser defaults
Works across all modern browsers
Boxes that users can check on/off
Styled squares with checkmarksCircles where users pick one option
Custom circles with dots insideButtons to select files
Beautiful upload buttonsSliders to pick numbers
Modern slider with custom track/* Hide the ugly default checkbox/radio */
input[type="checkbox"],
input[type="radio"] {
appearance: none; /* This is the magic! */
-webkit-appearance: none;
}
/* Now you have a blank canvas to style! */appearance: none removes all browser default styling, giving you complete control. Always include -webkit-appearance: none for Safari support!<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" checked>
<span class="checkbox-custom"></span>
<span class="checkbox-text">Enable notifications</span>
</label>
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
<span class="checkbox-text">Subscribe to newsletter</span>
</label>
<label class="checkbox-label">
<input type="checkbox" checked>
<span class="checkbox-custom"></span>
<span class="checkbox-text">Remember me</span>
</label>
<label class="checkbox-label">
<input type="checkbox" disabled>
<span class="checkbox-custom"></span>
<span class="checkbox-text">Disabled option</span>
</label>
</div>Loading preview...
<div class="radio-group">
<p class="group-label">Choose your plan:</p>
<label class="radio-label">
<input type="radio" name="plan" value="free" checked>
<span class="radio-custom"></span>
<span class="radio-content">
<strong>Free Plan</strong>
<small>Basic features</small>
</span>
</label>
<label class="radio-label">
<input type="radio" name="plan" value="pro">
<span class="radio-custom"></span>
<span class="radio-content">
<strong>Pro Plan</strong>
<small>Advanced features</small>
</span>
</label>
<label class="radio-label">
<input type="radio" name="plan" value="enterprise">
<span class="radio-custom"></span>
<span class="radio-content">
<strong>Enterprise Plan</strong>
<small>Full features</small>
</span>
</label>
</div>Loading preview...
<div class="slider-wrapper">
<label for="volume">Volume: <span id="volume-value">50</span>%</label>
<input type="range" id="volume" min="0" max="100" value="50">
</div>
<div class="slider-wrapper">
<label for="brightness">Brightness: <span id="brightness-value">75</span>%</label>
<input type="range" id="brightness" min="0" max="100" value="75">
</div>Loading preview...
Match form controls to your company's design system
Create larger, more user-friendly controls
Make controls touch-friendly for mobile devices
Create dark mode or themed form controls
✅ All Modern Browsers: Custom form elements using appearance: none work in Chrome, Firefox, Safari, and Edge. Range sliders need vendor prefixes for best compatibility.