Style range sliders and checkboxes with theme cyan color

- Add accent-color: #00d9ff to input[type='range'] and input[type='checkbox']
- Custom webkit slider thumb and track styling with cyan theme
- Custom Firefox slider styling with cyan theme
- Radio button styling with cyan accent

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Sonnet 4.6 committed 2026-05-15 14:14:46 -04:00
1 parent 2739e1e941
commit 8b7022c45e
1 file changed
+49
+49
View File
@@ -207,6 +207,55 @@
input[type="range"] {
width: 100%;
height: 6px;
accent-color: #00d9ff;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #00d9ff;
cursor: pointer;
border: 2px solid #00d9ff;
}
input[type="range"]::-webkit-slider-runnable-track {
background: var(--line);
height: 6px;
border-radius: 3px;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #00d9ff;
cursor: pointer;
border: 2px solid #00d9ff;
}
input[type="range"]::-moz-range-track {
background: var(--line);
height: 6px;
border-radius: 3px;
border: none;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #00d9ff;
}
input[type="radio"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #00d9ff;
}
textarea {