Skip to content

Instantly share code, notes, and snippets.

@leostratus

leostratus/webkit-pseudo-elements.md

Created September 21, 2012 01:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leostratus/3759334 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leostratus/3759334 to your computer and use it in GitHub Desktop.
Download ZIP
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
Raw
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

@Daemeron
Copy link
Copy Markdown

Daemeron commented May 31, 2016 •
edited
Loading

There is new pseudo element on ios browsers:

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

@JoysonAnto
Copy link
Copy Markdown

JoysonAnto commented Jul 11, 2016

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

@jocoweb
Copy link
Copy Markdown

jocoweb commented Jul 21, 2016

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

@marinaglancy
Copy link
Copy Markdown

marinaglancy commented Nov 9, 2016

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 :)

@aqzhyi
Copy link
Copy Markdown

aqzhyi commented Dec 30, 2016

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.

@qpSHiNqp
Copy link
Copy Markdown

qpSHiNqp commented Jul 7, 2017 •
edited
Loading

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?

Copy link
Copy Markdown

ghost commented Jul 5, 2018

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

@FPChris
Copy link
Copy Markdown

FPChris commented Sep 6, 2018

-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.

@gostrafx
Copy link
Copy Markdown

gostrafx commented Aug 25, 2019 •
edited
Loading

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

@NishthaJain04
Copy link
Copy Markdown

NishthaJain04 commented Apr 1, 2021 •
edited
Loading

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?

@khenriksson
Copy link
Copy Markdown

khenriksson commented Nov 17, 2021

Has anybody found a way to remove the Airplay button?

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