Native browser and system UI styling for cursors, scrollbars, selections, and form controls

Interactive cursor demonstrations

Default
Standard arrow cursor
cursor: default
Pointer
Hand cursor for clickable elements
cursor: pointer
Text
I-beam for text selection
cursor: text
Wait
Loading or processing
cursor: wait
Grab
Draggable element
cursor: grab
Grabbing
Currently dragging
cursor: grabbing
N-Resize
Vertical resize
cursor: n-resize
E-Resize
Horizontal resize
cursor: e-resize
NE-Resize
Diagonal resize
cursor: ne-resize
NW-Resize
Diagonal resize
cursor: nw-resize
Not-Allowed
Action prohibited
cursor: not-allowed
Move
Move element in any direction
cursor: move
Crosshair
Precision pointing
cursor: crosshair
Help
Help or info available
cursor: help
Progress
Background processing
cursor: progress

Custom scrollbar styling

Standard Scrollbar
Default browser scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Line 20

Neobrutalist Scrollbar
Custom styled scrollbar

Neobrutalist content with custom scrollbar. Line 1

Neobrutalist content with custom scrollbar. Line 2

Neobrutalist content with custom scrollbar. Line 3

Neobrutalist content with custom scrollbar. Line 4

Neobrutalist content with custom scrollbar. Line 5

Neobrutalist content with custom scrollbar. Line 6

Neobrutalist content with custom scrollbar. Line 7

Neobrutalist content with custom scrollbar. Line 8

Neobrutalist content with custom scrollbar. Line 9

Neobrutalist content with custom scrollbar. Line 10

Neobrutalist content with custom scrollbar. Line 11

Neobrutalist content with custom scrollbar. Line 12

Neobrutalist content with custom scrollbar. Line 13

Neobrutalist content with custom scrollbar. Line 14

Neobrutalist content with custom scrollbar. Line 15

Neobrutalist content with custom scrollbar. Line 16

Neobrutalist content with custom scrollbar. Line 17

Neobrutalist content with custom scrollbar. Line 18

Neobrutalist content with custom scrollbar. Line 19

Neobrutalist content with custom scrollbar. Line 20

Scrollbar Style Variations
Different scrollbar themes

Thick Track

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Content 9

Content 10

Colored Thumb

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Content 9

Content 10

Rounded

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Content 9

Content 10

Text selection and focus styling

Text Selection
Try selecting text below

Default Selection:

Select this text to see the default browser selection color. This demonstrates how text selection works with the system defaults.

Neobrutalist Selection:

Select this text to see our custom selection styling with themed colors.

Brand Selection:

Select this text to see brand-colored selection with purple background that matches our design system.

Focus Rings
Keyboard navigation indicators

Browser UI theming and meta colors

Meta Theme Configuration
Browser UI color theming

Current Meta Tags:

<meta name="theme-color" content="#000000" />

<meta name="msapplication-navbutton-color" content="#000000" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Color Variations:

Black Theme

Brand Purple

Light Theme

Dark Gray

Native form element styling

Native Controls
Styled native form elements
Input Styling
Text inputs and selects

Custom purple caret color

Try browser autofill to see custom styling

Red caret, yellow selection, no resize

Implementation code for system UI styles

Scrollbar CSS
/* Neobrutalist Scrollbar */
.scrollbar-custom::-webkit-scrollbar {
  width: 16px;
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: #f1f1f1;
  border: 2px solid #000;
  border-radius: 0;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background: #000;
  border: 2px solid #000;
  border-radius: 0;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: #333;
  box-shadow: 4px 4px 0px rgba(0,0,0,1);
}