Skip to content

Instantly share code, notes, and snippets.

@p3t3r67x0

p3t3r67x0/pseudo_elements.md

Last active July 25, 2025 09:29
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save p3t3r67x0/aefd6e25064c08e0cc9a to your computer and use it in GitHub Desktop.
Download ZIP
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
Raw
pseudo_elements.md

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
  background-color: lime;
}

Note

All Trident pseudo-elements listed here were added in IE10 and will not work in earlier versions of Internet Explorer. In WebKit, to style some pseudo-elements you must set the basis element’s -webkit-appearance pseudo-class to none.

<input type="search">

input[type=search]::-webkit-search-cancel-button

input[type=search]::-webkit-search-cancel-button:after

input[type=search]::-webkit-search-decoration

input[type=search]::-webkit-search-results-decoration

input[type=search]::-webkit-search-results-button

input[type=search]::-webkit-textfield-decoration-container

<input type="file">

WebKit provides a hook for its file input button with the pseudo-element.

input[type=file]::-ms-browse

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

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

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

input[type=file]:active:disabled::-webkit-file-upload-button

input[type=file] > input[type=button]::-moz-focus-inner

<input type="range">

WebKit provides a pseudo-element for the track and for the range handle itself. As of Firefox 22, Gecko provides pseudo-elements for styling range inputs. Trident provides a bunch of pseudo-elements to customize its range selector.

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

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

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

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

input[type=range]::-webkit-slider-thumb

input[type=range]::-webkit-slider-thumb:before

input[type=range]::-webkit-slider-thumb:after

input[type=range]:active::-webkit-slider-thumb

input[type=range]:hover::-webkit-slider-thumb:before

input[type=range]:hover::-webkit-slider-thumb:after

input[type=range]:focus::-webkit-slider-thumb:before

input[type=range]:focus::-webkit-slider-thumb:after

input[type=range]:disabled::-webkit-slider-thumb:before

input[type=range]:disabled::-webkit-slider-thumb:after

input[type=range]::-webkit-media-slider-thumb

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

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

input[type=range]:focus::-webkit-slider-thumb

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

input[type=range]::-webkit-color-swatch

input[type=range]::-moz-range-track

input[type=range][orient=vertical]::-moz-range-track

input[type=range]:focus::-moz-range-track

input[type=range]::-moz-range-progress

input[type=range]::-moz-range-thumb

input[type=range]:focus::-moz-range-thumb

input[type=range]:focus::-moz-range-thumb:before

input[type=range]:focus::-moz-range-thumb:after

input[type=range]::-moz-focus-outer

input[type=range]::-ms-fill-lower

input[type=range]::-ms-fill-upper

input[type=range]::-ms-ticks-before

input[type=range]::-ms-ticks-after

input[type=range]::-ms-thumb

input[type=range]::-ms-thumb:hover

input[type=range]::-ms-track

input[type=range]:focus::-ms-track

input[type=range]::ms-tooltip

<input type="time">

Applies one or more styles to the clear button of a text input control. The clear button is shown only when the text input control has focus and is not empty.

input[type=time]::-ms-clear

input[type=time]::-webkit-clear-button

<input type="date">

The following pseudo-elements are made available by WebKit for customizing a date input’s textbox.

input[type=date]::-webkit-datetime-edit

input[type=date]::-webkit-datetime-edit-fields-wrapper

input[type=date]::-webkit-datetime-edit-text

input[type=date]::-webkit-datetime-edit-month-field

input[type=date]::-webkit-datetime-edit-day-field

input[type=date]::-webkit-datetime-edit-year-field

input[type=date]::-webkit-inner-spin-button

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

input[type=date]::-webkit-clear-button

<input type="color">

Webkit provides two pseudo elements for its color picker.

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

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

input[type=color]::-moz-color-swatch

input[type=color]::-moz-focus-inner

<input type="number">

WebKit provides a spinner control by default for number picker inputs. While you cannot do a whole lot with these elements, it can be useful to hide the spinner.

input[type=number]::-webkit-textfield-decoration-container

input[type=number]::-webkit-textfield-decoration-container:before

input[type=number]::-webkit-textfield-decoration-container:after

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

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

input[type=number]::-moz-number-wrapper

input[type=number]::-moz-number-text

input[type=number]::-moz-number-spin-box

input[type=number]::-moz-number-spin-up

input[type=number]::-moz-number-spin-down

<input type="checkbox">

Trident provides a pseudo-element for checkbox button control.

input[type=checkbox]::-ms-check

<input type="radio">

Trident provides a pseudo-element for the radio button control.

input[type=radio]::-ms-check

<input type="text">

As of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs. Further more in IE10 when a text input has focus and is not empty, a small (x) control appears in the right hand side of the input. When clicked, the control will clear the contents of the text input.

input[type=text]::-ms-value

input[type=text]::-ms-clear

<input type="password">

Trident provides a control on password inputs that can be pressed to display the password in plain text. And as of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs.

input[type=password]::-ms-reveal

input[type=password]::-ms-value

<input type="reset">

input[type=reset]::-moz-focus-inner

<input type="submit">

input[type=submit]::-moz-focus-inner

<input type="button">

input[type=button]::-moz-focus-inner

placeholder Attribute

WebKit and Gecko provide a placeholder pseudo-element. Note: Gecko switched from the pseudo-class :-moz-placeholder to the pseudo-element ::-moz-placeholder in Firefox 19.

::-moz-placeholder

:-ms-input-placeholder

::-webkit-input-placeholder

<keygen>

WebKit provides a pseudo-element that can be used to customize the dropdown that a keygen element uses.

::-webkit-keygen-select

<input>

Gecko and Webkit applies following pseudo-elements to there inputs.

input:valid + label::after

input:invalid + label::after

input::-webkit-input-list-button

input::-webkit-input-speech-button

input::-webkit-textfield-decoration-container

input::-webkit-calendar-picker-indicator

input::-moz-placeholder

input::-moz-focus-inner

input::-ms-clear

<button>

button::-moz-focus-inner

<select>

As of IE10 Trident gives you a hook to style the arrow within select dropdowns.

select::-ms-expand

<details>

details::-webkit-details-marker

<summary>

summary::-webkit-details-marker

<meter>

WebKit provides pseudo-elements to customize the display of meter elements.

meter::-webkit-meter

meter::-webkit-meter-horizontal-bar

meter::-webkit-meter-vertical-bar

meter::-webkit-meter-horizontal-optimum-value

meter::-webkit-meter-horizontal-suboptimal-value

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

meter::-webkit-meter-vertical-optimum-value

meter::-webkit-meter-vertical-suboptimal-value

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

meter::-moz-meter-bar

meter:-moz-meter-optimum::-moz-meter-bar

meter:-moz-meter-sub-optimum::-moz-meter-bar

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar

On Mac OS X, WebKit provides multiple built-in appearances for <meter>.

 /* Default */
-webkit-appearance: continuous-capacity-level-indicator;
-webkit-appearance: discrete-capacity-level-indicator;
-webkit-appearance: relevancy-level-indicator;
-webkit-appearance: rating-level-indicator;

<progress>

WebKit provides pseudo-elements to style progress elements. And Gecko provides a pseudo-element to style the progress bar itself. Like Gecko, Trident provides a single pseudo-element to style the progress bar.

progress::-webkit-progress-bar

progress::-webkit-progress-value

progress::-webkit-progress-bar-value

progress::-moz-progress-bar

progress::-ms-fill

<textarea>

This pseudo-element also allows some basic styling for the textarea resizer.

textarea::-webkit-resizer

textarea::-webkit-resizer:window-inactive

textarea::-webkit-input-placeholder

textarea::-moz-placeholder

Note: Adding display: none to ::-webkit-resizer doesn't actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing in textarea use this.

textarea {
  resize: none;
}

<img>

img::-webkit-image-inner-element

<p>

p::after

p::before

p::first-letter

p::first-line

p::selection

<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-overlay-play-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

Scrollbar

Custom Scrollbars in WebKit.

::-webkit-scrollbar

::-webkit-scrollbar-button

::-webkit-scrollbar-button:disabled

::-webkit-scrollbar-button:double-button:horizontal:end:decrement

::-webkit-scrollbar-button:double-button:horizontal:end:increment

::-webkit-scrollbar-button:double-button:horizontal:end:increment:corner-present

::-webkit-scrollbar-button:double-button:horizontal:start:decrement

::-webkit-scrollbar-button:double-button:horizontal:start:increment

::-webkit-scrollbar-button:double-button:vertical:end:decrement

::-webkit-scrollbar-button:double-button:vertical:end:increment

::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present

::-webkit-scrollbar-button:double-button:vertical:start:decrement

::-webkit-scrollbar-button:double-button:vertical:start:increment

::-webkit-scrollbar-button:end

::-webkit-scrollbar-button:end:decrement

::-webkit-scrollbar-button:end:increment

::-webkit-scrollbar-button:horizontal

::-webkit-scrollbar-button:horizontal:decrement

::-webkit-scrollbar-button:horizontal:decrement:active

::-webkit-scrollbar-button:horizontal:decrement:hover

::-webkit-scrollbar-button:horizontal:decrement:window-inactive

::-webkit-scrollbar-button:horizontal:end

::-webkit-scrollbar-button:horizontal:end:decrement

::-webkit-scrollbar-button:horizontal:end:increment

::-webkit-scrollbar-button:horizontal:end:increment:corner-present

::-webkit-scrollbar-button:horizontal:increment

::-webkit-scrollbar-button:horizontal:increment:active

::-webkit-scrollbar-button:horizontal:increment:hover

::-webkit-scrollbar-button:horizontal:increment:window-inactive

::-webkit-scrollbar-button:horizontal:start

::-webkit-scrollbar-button:horizontal:start:decrement

::-webkit-scrollbar-button:horizontal:start:increment

::-webkit-scrollbar-button:start

::-webkit-scrollbar-button:start:decrement`

::-webkit-scrollbar-button:start:increment

::-webkit-scrollbar-button:vertical

::-webkit-scrollbar-button:vertical:decrement

::-webkit-scrollbar-button:vertical:decrement:active

::-webkit-scrollbar-button:vertical:decrement:hover

::-webkit-scrollbar-button:vertical:decrement:window-inactive

::-webkit-scrollbar-button:vertical:end

::-webkit-scrollbar-button:vertical:end:decrement

::-webkit-scrollbar-button:vertical:end:increment

::-webkit-scrollbar-button:vertical:end:increment:corner-present

::-webkit-scrollbar-button:vertical:increment

::-webkit-scrollbar-button:vertical:increment:active

::-webkit-scrollbar-button:vertical:increment:hover

::-webkit-scrollbar-button:vertical:increment:window-inactive

::-webkit-scrollbar-button:vertical:start

::-webkit-scrollbar-button:vertical:start:decrement

::-webkit-scrollbar-button:vertical:start:increment

::-webkit-scrollbar-corner

::-webkit-scrollbar-corner:window-inactive

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:horizontal

::-webkit-scrollbar-thumb:horizontal:active

::-webkit-scrollbar-thumb:horizontal:hover

::-webkit-scrollbar-thumb:horizontal:window-inactive

::-webkit-scrollbar-thumb:vertical

::-webkit-scrollbar-thumb:vertical:active

::-webkit-scrollbar-thumb:vertical:hover

::-webkit-scrollbar-thumb:vertical:window-inactive

::-webkit-scrollbar-track

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-track-piece:disabled

::-webkit-scrollbar-track-piece:end

::-webkit-scrollbar-track-piece:horizontal:decrement

::-webkit-scrollbar-track-piece:horizontal:decrement:active

::-webkit-scrollbar-track-piece:horizontal:decrement:hover

::-webkit-scrollbar-track-piece:horizontal:end

::-webkit-scrollbar-track-piece:horizontal:end:corner-present

::-webkit-scrollbar-track-piece:horizontal:end:double-button

::-webkit-scrollbar-track-piece:horizontal:end:no-button

::-webkit-scrollbar-track-piece:horizontal:end:no-button:corner-present

::-webkit-scrollbar-track-piece:horizontal:end:single-button

::-webkit-scrollbar-track-piece:horizontal:increment

::-webkit-scrollbar-track-piece:horizontal:increment:active

::-webkit-scrollbar-track-piece:horizontal:increment:hover

::-webkit-scrollbar-track-piece:horizontal:start

::-webkit-scrollbar-track-piece:horizontal:start:double-button

::-webkit-scrollbar-track-piece:horizontal:start:no-button

::-webkit-scrollbar-track-piece:horizontal:start:single-button

::-webkit-scrollbar-track-piece:start

::-webkit-scrollbar-track-piece:vertical:decrement

::-webkit-scrollbar-track-piece:vertical:decrement:active

::-webkit-scrollbar-track-piece:vertical:decrement:hover

::-webkit-scrollbar-track-piece:vertical:end

::-webkit-scrollbar-track-piece:vertical:end:corner-present

::-webkit-scrollbar-track-piece:vertical:end:double-button

::-webkit-scrollbar-track-piece:vertical:end:no-button

::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present

::-webkit-scrollbar-track-piece:vertical:end:single-button

::-webkit-scrollbar-track-piece:vertical:increment

::-webkit-scrollbar-track-piece:vertical:increment:active

::-webkit-scrollbar-track-piece:vertical:increment:hover

::-webkit-scrollbar-track-piece:vertical:start

::-webkit-scrollbar-track-piece:vertical:start:double-button

::-webkit-scrollbar-track-piece:vertical:start:no-button

::-webkit-scrollbar-track-piece:vertical:start:single-button

::-webkit-scrollbar-track:disabled

::-webkit-scrollbar-track:horizontal

::-webkit-scrollbar-track:horizontal:disabled

::-webkit-scrollbar-track:horizontal:disabled:corner-present

::-webkit-scrollbar-track:vertical:disabled

::-webkit-scrollbar-track:vertical:disabled:corner-present

::-webkit-scrollbar:horizontal

::-webkit-scrollbar:horizontal:corner-present

::-webkit-scrollbar:horizontal:window-inactive

::-webkit-scrollbar:vertical

::-webkit-scrollbar:vertical:corner-present

::-webkit-scrollbar:vertical:window-inactive

::-webkit-textfield-decoration-container

Form validation message-bubbe

Note: Chrome 28 removed support for these pseudo-elements

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow

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

::-webkit-validation-bubble-heading

::-webkit-validation-bubble-message

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

Source

@Allan7
Copy link

Allan7 commented Sep 27, 2016

Thank you soo much for this!

Does anyone know if the moz equivalents for the audio tags? just switching the webkit for moz apparently doesn't work?

thanks in advance!

Allan

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