CSS Form & Scrollbar Styling Generator
Styling native form controls
Native form controls used to be all or nothing: accept the browser's look or rebuild the control from scratch and lose its behaviour. A handful of properties now recolour checkboxes, radios, range inputs, carets, selections and scrollbars while leaving the native behaviour entirely intact.
Syntax
accent-color: <color>; caret-color: <color>; color-scheme: light dark; scrollbar-color: <thumb> <track>;| Part | What it controls |
|---|---|
| accent-color | Recolours checkboxes, radio buttons, range sliders and progress bars in one declaration, keeping their native behaviour and accessibility. |
| caret-color | The text cursor colour in inputs and textareas. |
| color-scheme | Tells the browser which schemes an element supports, so native controls, scrollbars and form widgets render in the matching theme. |
| ::selection | The highlight colour for selected text. Only colour, background-color, text-shadow and a few others apply. |
| ::placeholder | Styles the placeholder text. Keep it distinguishable from real input, and never rely on it instead of a label. |
| scrollbar-color / scrollbar-width | The standard way to recolour and thin scrollbars, now supported widely enough to use in place of the -webkit- pseudo-elements. |
Notes from practice
accent-color beats rebuilding controls
A custom checkbox built from a div loses keyboard behaviour, form association and assistive-technology semantics. accent-color changes the colour and keeps all of it.
color-scheme is a one-line dark mode fix
Without it, native inputs, dropdowns and scrollbars stay light on a dark page. Declaring color-scheme: light dark on :root fixes them all at once.
Never remove focus styling
Form controls are where keyboard users spend their time. Restyle the focus ring with :focus-visible and outline-offset, but never remove it.
CSS Form & Scrollbar Styling Generator FAQ
How do I change the colour of a checkbox in CSS?
Set accent-color on the input or an ancestor: accent-color: #3a5bff. It recolours checkboxes, radios, range sliders and progress bars while keeping their native behaviour, keyboard support and accessibility.
How do I style a scrollbar in CSS?
Use the standard properties: scrollbar-color: #888 transparent and scrollbar-width: thin. They work across current browsers; the older ::-webkit-scrollbar pseudo-elements offer finer control but only in WebKit and Blink.
Why do my form inputs still look light in dark mode?
Native controls follow the browser's colour scheme, not your CSS. Declare color-scheme: light dark on :root and the browser renders inputs, dropdowns and scrollbars to match the active theme.
How do I change the text selection colour?
Use the ::selection pseudo-element: ::selection { background: #3a5bff; color: #fff }. Only a few properties apply inside it — colour, background-color and text-shadow among them — so you cannot change padding or font there.
Should I style placeholder text as a label?
No. Placeholder text disappears as soon as someone types, it has poor contrast by default, and screen-reader support is inconsistent. Always use a real label, and treat the placeholder as a hint about format.
Related generators
- Border, Outline & Border-image — Border styles, gradient frames through border-image, and an outline with offset for focus rings.
- Modern Color Functions — oklch(), color-mix(), relative colour syntax and light-dark(), with an sRGB hex fallback where it applies.
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
- Neumorphism — Soft extruded or pressed surfaces from two opposing shadows tinted off the base colour.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.