Browser User Interface.
Four browser interface behaviors styled with modern CSS only.
Each example keeps the native feature in charge, then exposes a focused CSS layer for highlights, scrollbars, focus states and form controls. No JavaScript, no dependencies, no build step.
Browser Native behavior
CSS Hooks Themeable UI
JavaScript 0 KB
This section documents browser-owned UI surfaces: what the browser already provides, which CSS hooks can theme them, and where support or platform rendering still sets the limits.
-
01.
Selection & search
Selected text and find-in-page matches styled with
::selection,::search-textand::search-text:current. -
02.
Themed scrollbars
Custom scrollbars with WebKit pseudo-elements and Firefox's
scrollbar-color, scoped per rendering engine. -
03.
Focus
Accessible focus states with
:focus-visible, keeping keyboard navigation clear without styling every click. -
04.
Form UX
Native form controls themed with
accent-color,::placeholder,:user-validand:user-invalid.
Why browser-owned UI?
-
01.
Browser standards
Selection, scrolling, focus and form controls keep the behavior users already expect from their browser and operating system.
-
02.
Targeted styling
Modern CSS can theme specific browser surfaces without replacing them with custom widgets or duplicating interaction logic.
-
03.
Graceful fallback
Unsupported selectors or properties are ignored safely, so the interface keeps working even when visual customization is limited.