Webkit Pseudo-Element Selectors (Shadow DOM Elements)

webkit-pseudo-elements.md

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

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

<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

Form validation message-bubbe (WebKit r82180 or later)

::-webkit-validation-bubble

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

::-webkit-validation-bubble-arrow

::-webkit-validation-bubble-message

<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

Search

::-webkit-search-cancel-button

::-webkit-search-decoration

::-webkit-search-results-button

::-webkit-search-results-decoration

Scrollbar

::-webkit-scrollbar

::-webkit-scrollbar-button

::-webkit-scrollbar-corner

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

::-webkit-scrollbar-track-piece

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

-webkit-inner-spin-button

-webkit-input-placeholder

-webkit-input-speech-button

-webkit-meter-horizontal-bar

-webkit-meter-horizontal-even-less-good-value

-webkit-meter-horizontal-optimum-value

-webkit-meter-horizontal-suboptimal-value

-webkit-meter-vertical-bar

-webkit-outer-spin-button

-webkit-progress-bar-value

-webkit-resizer

There is setting in chrome developer tools: "Show user agent shadow DOM". Put it on and then you can see all hidden pseudo elements.

-webkit-media-controls-play-button seems to be gone now in Chrome and only that GIANT overlay play button. Not cool. This breaks many projects of ours.

Here are some more:

-webkit-user-modify: read-only !important;
-webkit-text-security: disc !important;

-webkit-appearance: media-mute-button;
-webkit-appearance: media-overlay-play-button;
-webkit-appearance: media-play-button;
-webkit-appearance: media-controls-background;
-webkit-appearance: media-current-time-display;
-webkit-appearance: media-slider;
-webkit-appearance: media-volume-slider;
-webkit-appearance: media-enter-fullscreen-button;
-webkit-appearance: media-toggle-closed-captions-button;

-webkit-appearance: textarea;
-webkit-appearance: button;
-webkit-appearance: push-button;
-webkit-appearance: menulist;
-webkit-appearance: listbox;
-webkit-appearance: slider-horizontal;
-webkit-appearance: sliderthumb-horizontal;
-webkit-appearance: checkbox;
-webkit-appearance: radio;
-webkit-appearance: square-button;
-webkit-appearance: meter;
-webkit-appearance: progress-bar;
-webkit-appearance: textfield;
-webkit-appearance: searchfield;
-webkit-appearance: searchfield-cancel-button;
-webkit-appearance: searchfield-decoration;
-webkit-appearance: searchfield-results-decoration;
-webkit-appearance: inner-spin-button;
 
video:-webkit-full-page-media
video:-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-overlay-enclosure
video::-webkit-media-controls-fullscreen-volume-slider
video::-webkit-media-controls-fullscreen-volume-min-button
video::-webkit-media-controls-fullscreen-volume-max-button
video::-webkit-media-text-track-container
video::-webkit-media-text-track-region
video::-webkit-media-text-track-region-container
video::-webkit-media-text-track-display
video:-webkit-full-screen

audio:-webkit-full-page-media
audio:-webkit-full-page-media::-webkit-media-controls-panel
audio::-webkit-media-controls-overlay-enclosure
audio::-webkit-media-controls-fullscreen-volume-slider
audio::-webkit-media-controls-fullscreen-volume-min-button
audio::-webkit-media-controls-fullscreen-volume-max-button
audio:-webkit-full-screen

input:-webkit-autofill
:-webkit-full-screen-ancestor
:root:-webkit-full-screen-document
img:-webkit-full-screen
iframe:-webkit-full-screen

textarea:-webkit-autofill 

progress::-webkit-progress-inner-element
progress::-webkit-progress-bar 
progress::-webkit-progress-value

select:-internal-list-box
select:-webkit-autofill
option:-internal-spatial-navigation-focus

::-webkit-input-placeholder

input::-webkit-outer-spin-button
input::-webkit-inner-spin-button
input::-webkit-input-placeholder
input::-webkit-calendar-picker-indicator
input::-webkit-datetime-edit
input::-webkit-datetime-edit-fields-wrapper 
input::-webkit-clear-button


input[type="date"]:disabled::-webkit-clear-button,
input[type="date"]:disabled::-webkit-inner-spin-button,
input[type="color"]::-webkit-color-swatch
input[type="color"]::-webkit-color-swatch-wrapper

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

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

input[type="search"]::-webkit-search-cancel-button
input[type="search"]::-webkit-search-results-decoration
input[type="search"]::-webkit-search-results-button

There is new pseudo element on ios browsers:

::-webkit-media-controls-start-playback-button

is this the grey button that appears as overlay play button only in the beginning of the video? and is it still relevant?

Has anybody found a way to remove the Airplay button?