Skip to content

Instantly share code, notes, and snippets.

@bbbrrriiiaaannn
Forked from leostratus/webkit-pseudo-elements.md
Last active November 7, 2023 15:22
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bbbrrriiiaaannn/4590985 to your computer and use it in GitHub Desktop.
Save bbbrrriiiaaannn/4590985 to your computer and use it in GitHub Desktop.

Some updates to Angelina Fabbro's tremendous original reference document. The most notable additions are shadow pseudoclasses for scroller pseudoelements.

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want: -webkit-appearance:none;

<video>

video::-webkit-media-controls-panel

video::-webkit-media-controls-play-button

video::-webkit-media-controls-volume-slider-container

video::-webkit-media-controls-volume-slider

video::-webkit-media-controls-mute-button

video::-webkit-media-controls-timeline

video::-webkit-media-controls-current-time-display

video::-webkit-full-page-media::-webkit-media-controls-panel

video::-webkit-media-controls-timeline-container

video::-webkit-media-controls-time-remaining-display

video::-webkit-media-controls-seek-back-button

video::-webkit-media-controls-seek-forward-button

video::-webkit-media-controls-fullscreen-button

video::-webkit-media-controls-rewind-button

video::-webkit-media-controls-return-to-realtime-button

video::-webkit-media-controls-toggle-closed-captions-button

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

<input type="range">

input[type="range"]::-webkit-slider-thumb`
  :disabled
  :hover

input[type="range"]::-webkit-slider-container

input[type="range"]::-webkit-slider-runnable-track

<input type="file">

input[type="file"]::-webkit-file-upload-button

<input type="number">

input[type="number"]::-webkit-inner-spin-button

input[type="number"]::-webkit-outer-spin-button

<input type="color">

input[type="color"]::-webkit-color-swatch input[type="color"]::-webkit-color-swatch-wrapper

<input type="date">

`input[type="date"]::-webkit-calendar-picker-indicator

Form validation message-bubbe (WebKit r82180 or later)

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper

::-webkit-validation-bubble-arrow

::-webkit-validation-bubble-message

::-webkit-validation-bubble-heading

::-webkit-validation-bubble-text-block

<progress>

progress::-webkit-progress-bar

progress::-webkit-progress-value

<meter>

meter::-webkit-progress-bar

meter::-webkit-meter-optimum-value

meter::-webkit-meter-suboptimum-value

meter::-webkit-meter-even-less-good-value

meter::-webkit-meter-horizontal-bar

meter::-webkit-meter-vertical-bar

<details>

details::-webkit-details-marker

Search

::-webkit-search-cancel-button

::-webkit-search-decoration

::-webkit-search-results-button

::-webkit-search-results-decoration

Scrollbar

::-webkit-scrollbar
  :horizontal
  :vertical
  :corner-present
  :window-inactive
::-webkit-scrollbar-button
  :disabled
  :double-button
  :horizontal
  :vertical
  :corner-present
  :start
  :end
  :decrement
  :increment
  :active
  :hover
  :window-inactive
::-webkit-scrollbar-corner
  :window-inactive
::-webkit-scrollbar-thumb
  :horizontal
  :vertical
  :active
  :hover
  :window-inactive
::-webkit-scrollbar-track
  :disabled
  :horizontal
  :vertical
  :corner-present
::-webkit-scrollbar-track-piece
  :disabled
  :start
  :end
  :horizontal
  :vertical
  :corner-present
  :decrement
  :increment
  :active
  :hover
  :no-button
  :single-button
  :double-button
::-webkit-resizer
  :window-inactive

Unsorted/Haven't investigated usage at all yet (Could contain dupes)

::-webkit-textfield-decoration-container

::-webkit-image-inner-element

::-webkit-media-controls-panel

::-webkit-media-controls-timeline-container

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment