CSS ::-webkit-scrollbar Pseudo-Element

The ::-webkit-scrollbar pseudo-element is a non-standard CSS extension used to customize the appearance of scrollbars in supported browsers. It allows developers to adjust scrollbar dimensions and style individual components, including the track and draggable thumb, using related WebKit-prefixed pseudo-elements.

Syntax

selector::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

The selector identifies the scrollable element whose scrollbar should be customized.

The width property sets the requested width of a vertical scrollbar, while height sets the requested height of a horizontal scrollbar.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

Scrollbar appearance also depends on the browser, operating system, and scrollbar display settings.

How It Works

A scrollbar allows users to navigate content that extends beyond the visible area of a scrollable element.

Browsers may display vertical scrollbars, horizontal scrollbars, or both, depending on the content and the element's overflow settings.

The ::-webkit-scrollbar pseudo-element targets the scrollbar as a whole in browsers that support this extension.

Related pseudo-elements can target individual scrollbar components, allowing developers to apply different colors, borders, and backgrounds.

For example, a scrollable container can have a narrow scrollbar with a light gray track and a darker draggable thumb.

Custom scrollbar styling changes the visual appearance of scrolling controls. It does not change the content's scroll position or the underlying scrolling behavior.

Scrollbar Components

WebKit-prefixed scrollbar styling provides several pseudo-elements for targeting different parts of a scrollbar.

::-webkit-scrollbar - Targets the scrollbar as a whole.
::-webkit-scrollbar-track - Targets the track along which the thumb moves.
::-webkit-scrollbar-thumb - Targets the draggable portion of the scrollbar.
::-webkit-scrollbar-track-piece - Targets a portion of the track not covered by the thumb.
::-webkit-scrollbar-button - Targets scrollbar buttons when the browser provides them.
::-webkit-scrollbar-corner - Targets the corner where horizontal and vertical scrollbars meet.
::-webkit-resizer - Targets the resize control of a resizable element when one is present.

Not every scrollbar contains all of these components. Some browsers and operating systems use overlay scrollbars that appear temporarily or omit traditional scrollbar buttons.

These selectors are non-standard and may not behave consistently across browser implementations.

Setting Scrollbar Dimensions

The ::-webkit-scrollbar pseudo-element can be used to request specific scrollbar dimensions.

.scroll-box {
  width: 300px;
  height: 150px;
  overflow: auto;
}
.scroll-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

The overflow: auto declaration allows scrollbars to appear when the content exceeds the container's dimensions.

The width declaration requests a 10-pixel-wide vertical scrollbar, while height requests a 10-pixel-high horizontal scrollbar.

Actual scrollbar dimensions may be affected by browser behavior, operating system settings, and overlay scrollbar implementations.

Avoid making scrollbars excessively narrow because small scrolling controls can be difficult to use with a mouse or other pointing device.

Styling the Track and Thumb

The background track and draggable thumb can be customized using related WebKit-prefixed pseudo-elements.

.scroll-box::-webkit-scrollbar {
  width: 12px;
}
.scroll-box::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 6px;
}
.scroll-box::-webkit-scrollbar-thumb {
  background: #777;
  border-radius: 6px;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

The ::-webkit-scrollbar-track selector changes the background track to light gray.

The ::-webkit-scrollbar-thumb selector changes the draggable thumb to a darker gray and rounds its corners.

The :hover pseudo-class applies a darker color when the pointer moves over the thumb, where supported.

These styles are applied only in browser environments that recognize the WebKit-prefixed scrollbar selectors.

Example

The following example creates a scrollable container with a customized vertical scrollbar.

HTML:

<div class="scroll-box" tabindex="0" role="region" aria-label="Scrollable CSS example">
  <p>CSS controls the presentation of HTML elements.</p>
  <p>Selectors identify the elements to style.</p>
  <p>Properties define colors, spacing, and layout.</p>
  <p>Pseudo-elements target specific parts of elements.</p>
  <p>Overflow allows content to scroll when needed.</p>
  <p>Scrollbars help users navigate overflowing content.</p>
</div>

CSS:

.scroll-box {
  width: 300px;
  height: 150px;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid #ccc;
}
.scroll-box::-webkit-scrollbar {
  width: 12px;
}
.scroll-box::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 6px;
}
.scroll-box::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 6px;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #004c99;
}

The container is 300 pixels wide and 150 pixels high, with vertical scrolling enabled when its content exceeds the available height.

In supported browsers using visible, stylable scrollbars, the track appears light gray and the draggable thumb appears blue.

When the pointer moves over the thumb, its color changes to a darker blue.

The tabindex="0" attribute allows the container to receive keyboard focus, while role="region" and aria-label identify the scrollable area for assistive technology.

On systems that use overlay scrollbars, the scrollbar may appear only during scrolling, and its appearance may differ from the CSS declarations.

Horizontal Scrollbars

The ::-webkit-scrollbar pseudo-element can also customize horizontal scrollbars.

A horizontal scrollbar appears when content extends beyond the available width and horizontal overflow is enabled.

.horizontal-scroll {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}
.horizontal-scroll::-webkit-scrollbar {
  height: 10px;
}
.horizontal-scroll::-webkit-scrollbar-track {
  background: #e0e0e0;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 5px;
}

The white-space: nowrap declaration prevents ordinary text from wrapping onto additional lines.

When the content is wider than the container, horizontal scrolling becomes available.

The height property requests a 10-pixel-high horizontal scrollbar.

The track and thumb receive the same types of styling used for vertical scrollbars.

Standardized Scrollbar Properties

CSS also provides standardized properties for controlling scrollbar appearance without relying entirely on WebKit-prefixed pseudo-elements.

scrollbar-color

The scrollbar-color property specifies the colors of the scrollbar thumb and track.

.scroll-box {
  scrollbar-color: #0066cc #e0e0e0;
}

The first color applies to the thumb, and the second applies to the track.

scrollbar-width

The scrollbar-width property controls the scrollbar's preferred thickness using predefined values.

.scroll-box {
  scrollbar-width: thin;
}

Common values include auto, thin, and none.

The none value hides the scrollbar while preserving scrolling functionality, but hiding scrollbars can make scrollable content difficult to discover.

Combining Standard and WebKit Styling

Standardized scrollbar properties can be combined with WebKit-prefixed rules as a fallback approach.

.scroll-box {
  overflow: auto;
  scrollbar-color: #0066cc #e0e0e0;
  scrollbar-width: thin;
}
.scroll-box::-webkit-scrollbar {
  width: 12px;
}
.scroll-box::-webkit-scrollbar-track {
  background: #e0e0e0;
}
.scroll-box::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 6px;
}

When a browser supports scrollbar-color or scrollbar-width with a value other than auto, those standardized properties take precedence over ::-webkit-scrollbar styling.

Therefore, the WebKit-prefixed rules should be treated as a fallback rather than an additional layer of styling that always applies.

Use the standardized properties when broad compatibility and predictable behavior are more important than detailed customization of individual scrollbar components.

Accessibility Considerations

Custom scrollbars should remain visible, recognizable, and easy to operate.

Maintain sufficient contrast between the scrollbar thumb and track.
Avoid making scrollbars so narrow that they are difficult to select with a pointer.
Do not hide scrollbars when users need a visible indication that content can scroll.
Preserve keyboard scrolling and other native scrolling methods.
Ensure that custom styling does not interfere with operating system accessibility settings.
Test scrollable content using a keyboard, mouse, touch input, and different browser configurations.

When a custom scrollable region needs keyboard focus, use appropriate HTML semantics and provide an accessible name when necessary.

Scrollbar styling should improve the appearance of the interface without making scrolling harder or reducing the discoverability of overflowing content.

Browser Support

::-webkit-scrollbar is a non-standard browser-specific pseudo-element supported in Chromium-based browsers such as Chrome and Edge, and in Safari.

Firefox primarily uses the standardized scrollbar-color and scrollbar-width properties for scrollbar customization.

Scrollbar rendering also depends on the operating system and whether traditional or overlay scrollbars are used.

Support for ::-webkit-scrollbar does not guarantee that every scrollbar component or CSS declaration will behave identically across browsers.

For current compatibility information, visit Can I Use? and search for CSS scrollbar styling, including scrollbar-color and scrollbar-width.

Specifications

::-webkit-scrollbar is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

The standardized scrollbar-color and scrollbar-width properties are defined in the CSS Scrollbars Styling Module Level 1 .

The standardized properties provide a more portable approach to scrollbar customization, while WebKit-prefixed pseudo-elements allow additional component-level styling in supported implementations.