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

Android's Chrome shows a play button on a

Is there a pseudo-selector for this element?

Viewing this page on an Android device will reproduce this play button - http://pastie.org/6389445

fyi I documented all the form related pseudo-elements on my blog: http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/. Someone else should tackle the audio / video ones :)

The overlay play button which is not listed in the above lists is:

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

This is a very important style.

Hej great source, fyi I just tried to list for myself a detailed table of cross-browser pseudo-elements. https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a

Here are some more:

audio::-internal-media-controls-cast-button
audio::-webkit-media-controls-enclosure

video::-internal-media-controls-cast-button
video::-webkit-media-controls-enclosure

Anyone know why Chrome (not sure about other browsers) went from ::placeholder visibility: hidden to display: none !important? Not cool.

There is new pseudo element on ios browsers:

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

::-webkit-scrollbar is not working for select box please help

Hello everyone,

I uploaded this video html5 on my website .. But I wish that you could see the black bar.
see attachhttp://factory.dtekweb.com/playourday.it/web/video.jpg

by by

Please add
video::-webkit-media-controls-panel-container
I spent several hours looking for how to hide the gray line when video is paused and in the end I just guessed it :)

for iOS 10 safari

If you just use video::-webkit-media-controls-panel

You will have a empty gray line on the bottom of video.

use video::-webkit-media-controls-panel-container { display: none } to get rid of it completely.

For iOS 10 UIWebView, any of these selectors above could be used to dismiss the big center "Play" button (with display: none style).
For iOS 9 UIWebView and for even iOS 10 standalone Safari (not in-app), on the other hand, I confirmed that video::-webkit-media-controls selector can be used to set display: none style.
Anyone have some idea how I'm going wrong?

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?