Skip to content

Instantly share code, notes, and snippets.

@tylerFowler

tylerFowler/pseudo-elements.md

Forked from p3t3r67x0/pseudo_elements.md
Last active August 29, 2015 14:18
Show Gist options
  • Save tylerFowler/72059bc70cdb67dd452b to your computer and use it in GitHub Desktop.
Save tylerFowler/72059bc70cdb67dd452b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Aurelius Wendelken revised this gist Dec 30, 2014. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -790,9 +790,6 @@ Form validation message-bubbe

    Source
    -------------

    https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

    http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

    http://realworldvalidator.com/css/pseudoelements
    * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
    * http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
    * http://realworldvalidator.com/css/pseudoelements
  2. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,6 +72,8 @@ 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
  3. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -106,6 +106,12 @@ 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
  4. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -64,6 +64,8 @@ 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
    @@ -120,6 +122,8 @@ input[type=range]::-ms-thumb:hover

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

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

    input[type=range]::ms-tooltip
    ```

  5. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -780,4 +780,7 @@ Source
    -------------

    https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
    http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

    http://realworldvalidator.com/css/pseudoelements
  6. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -778,4 +778,6 @@ Form validation message-bubbe

    Source
    -------------

    https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
    http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
  7. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -774,4 +774,8 @@ Form validation message-bubbe
    ::-webkit-validation-bubble-message

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

    Source
    -------------
    http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
  8. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 20 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -96,8 +96,12 @@ 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]::-moz-focus-outer
    @@ -164,6 +168,10 @@ 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
    ```


    @@ -297,6 +305,8 @@ input::-webkit-textfield-decoration-container

    input::-webkit-calendar-picker-indicator

    input::-moz-placeholder

    input::-moz-focus-inner

    input::-ms-clear
    @@ -358,6 +368,14 @@ 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>`.
    @@ -397,6 +415,8 @@ 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.*
  9. Aurelius Wendelken revised this gist Dec 7, 2014. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -181,6 +181,16 @@ 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
    ```


  10. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -84,14 +84,22 @@ input[type=range]:disabled::-webkit-slider-thumb:after

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

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

    input[type=range]::-webkit-slider-thumb:hover
    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]:focus::-moz-range-track

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

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

    input[type=range]::-ms-fill-lower
  11. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -397,6 +397,22 @@ img::-webkit-image-inner-element
    ```


    &lt;p&gt;
    -------------

    ```css
    p::after

    p::before

    p::first-letter

    p::first-line

    p::selection
    ```


    &lt;video&gt;
    -------------

  12. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ video /deep/ input[type=range] {

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


    &lt;input type="search"&gt;
  13. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ 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.

    ```css
    selector::pseudo-element {
    video::webkit-media-controls-timeline {
    background-color: lime;
    }

  14. Aurelius Wendelken revised this gist Dec 6, 2014. No changes.
  15. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,12 @@
    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 `::shadow` or the `/deep/` path selector.
    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.

    ```css
    selector::pseudo-element {
    background-color: lime;
    }

    video /deep/ input[type=range] {
    background-color: lime;
    }
  16. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -263,6 +263,10 @@ WebKit provides a pseudo-element that can be used to customize the dropdown that
    Gecko and Webkit applies following pseudo-elements to there inputs.

    ```css
    input:valid + label::after

    input:invalid + label::after

    input::-webkit-input-list-button

    input::-webkit-input-speech-button
  17. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 19 additions and 1 deletion.
    20 changes: 19 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    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 `::shadow` or the `/deep/` psth selector.
    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 `::shadow` or the `/deep/` path selector.

    ```css
    video /deep/ input[type=range] {
    @@ -62,6 +62,22 @@ input[type=range]::-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]: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]::-webkit-slider-thumb:disabled
    @@ -351,7 +367,9 @@ This pseudo-element also allows some basic styling for the textarea resizer.

    ```css
    textarea::-webkit-resizer

    textarea::-webkit-resizer:window-inactive

    textarea::-webkit-input-placeholder
    ```

  18. Aurelius Wendelken revised this gist Dec 6, 2014. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,13 @@
    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 `::shadow` or the `/deep/` psth selector.

    ```css
    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`.
  19. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -276,6 +276,14 @@ details::-webkit-details-marker
    ```


    &lt;summary&gt;
    -------------

    ```css
    summary::-webkit-details-marker
    ```


    &lt;meter&gt;
    -------------
    WebKit provides pseudo-elements to customize the display of meter elements.
  20. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 185 additions and 181 deletions.
    366 changes: 185 additions & 181 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -276,6 +276,76 @@ details::-webkit-details-marker
    ```


    &lt;meter&gt;
    -------------
    WebKit provides pseudo-elements to customize the display of meter elements.

    ```css
    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
    ```

    On Mac OS X, WebKit provides multiple built-in appearances for `<meter>`.
    ```css
    /* Default */
    -webkit-appearance: continuous-capacity-level-indicator;
    -webkit-appearance: discrete-capacity-level-indicator;
    -webkit-appearance: relevancy-level-indicator;
    -webkit-appearance: rating-level-indicator;
    ```


    &lt;progress&gt;
    -------------
    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.

    ```css
    progress::-webkit-progress-bar

    progress::-webkit-progress-value

    progress::-webkit-progress-bar-value

    progress::-moz-progress-bar

    progress::-ms-fill
    ```


    &lt;textarea&gt;
    -------------
    This pseudo-element also allows some basic styling for the textarea resizer.

    ```css
    textarea::-webkit-resizer
    textarea::-webkit-resizer:window-inactive
    textarea::-webkit-input-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.*

    ```css
    textarea {
    resize: none;
    }
    ```


    &lt;img&gt;
    -------------
    ```css
    @@ -359,301 +429,235 @@ audio::-webkit-media-controls-toggle-closed-captions-button
    ```


    &lt;meter&gt;
    -------------
    WebKit provides pseudo-elements to customize the display of meter elements.

    ```css
    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
    ```

    On Mac OS X, WebKit provides multiple built-in appearances for `<meter>`.
    ```css
    /* Default */
    -webkit-appearance: continuous-capacity-level-indicator;
    -webkit-appearance: discrete-capacity-level-indicator;
    -webkit-appearance: relevancy-level-indicator;
    -webkit-appearance: rating-level-indicator;
    ```


    &lt;progress&gt;
    -------------
    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.

    ```css
    progress::-webkit-progress-bar

    progress::-webkit-progress-value

    progress::-webkit-progress-bar-value

    progress::-moz-progress-bar

    progress::-ms-fill
    ```


    &lt;textarea&gt;
    Scrollbar
    -------------
    This pseudo-element also allows some basic styling for the textarea resizer.
    Custom Scrollbars in WebKit.

    ```css
    textarea::-webkit-resizer
    textarea::-webkit-resizer:window-inactive
    textarea::-webkit-input-placeholder
    ```
    ::-webkit-scrollbar

    *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.*
    ::-webkit-scrollbar-button

    ```css
    textarea {
    resize: none;
    }
    ```


    Scrollbar
    -------------
    `::-webkit-scrollbar`

    `::-webkit-scrollbar-button`
    ::-webkit-scrollbar-button:disabled

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

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

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

    `::-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:decrement`
    ::-webkit-scrollbar-button:double-button:horizontal:start:increment

    `::-webkit-scrollbar-button:double-button:horizontal:start:increment`
    ::-webkit-scrollbar-button:double-button:vertical:end:decrement

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

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

    `::-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:decrement`
    ::-webkit-scrollbar-button:double-button:vertical:start:increment

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

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

    `::-webkit-scrollbar-button:end:decrement`
    ::-webkit-scrollbar-button:end:increment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    `::-webkit-scrollbar-corner:window-inactive`
    ::-webkit-scrollbar-thumb

    `::-webkit-scrollbar-thumb`
    ::-webkit-scrollbar-thumb:horizontal

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

    `::-webkit-scrollbar-thumb:horizontal:active`
    ::-webkit-scrollbar-thumb:horizontal:hover

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

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

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

    `::-webkit-scrollbar-thumb:vertical:active`
    ::-webkit-scrollbar-thumb:vertical:hover

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

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

    `::-webkit-scrollbar-track`
    ::-webkit-scrollbar-track-piece

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

    `::-webkit-scrollbar-track-piece:disabled`
    ::-webkit-scrollbar-track-piece:end

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

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

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

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

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

    `::-webkit-scrollbar-track-piece:horizontal:end:corner-present`
    ::-webkit-scrollbar-track-piece:horizontal:end:double-button

    `::-webkit-scrollbar-track-piece:horizontal:end:double-button`
    ::-webkit-scrollbar-track-piece:horizontal:end:no-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:no-button:corner-present`
    ::-webkit-scrollbar-track-piece:horizontal:end:single-button

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

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

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

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

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

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

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

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

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

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

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

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

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

    `::-webkit-scrollbar-track-piece:vertical:end:corner-present`
    ::-webkit-scrollbar-track-piece:vertical:end:double-button

    `::-webkit-scrollbar-track-piece:vertical:end:double-button`
    ::-webkit-scrollbar-track-piece:vertical:end:no-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:no-button:corner-present`
    ::-webkit-scrollbar-track-piece:vertical:end:single-button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    `::-webkit-scrollbar:horizontal:corner-present`
    ::-webkit-scrollbar:horizontal:window-inactive

    `::-webkit-scrollbar:horizontal:window-inactive`
    ::-webkit-scrollbar:vertical

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

    `::-webkit-scrollbar:vertical:corner-present`
    ::-webkit-scrollbar:vertical:window-inactive

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

    `::-webkit-textfield-decoration-container`
    ::-webkit-textfield-decoration-container
    ```


    Form validation message-bubbe
  21. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,6 @@ 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`.

    tbd.

    `::-webkit-input-speech-button`


    &lt;input type="search"&gt;
    -------------
    @@ -243,6 +239,8 @@ Gecko and Webkit applies following pseudo-elements to there inputs.
    ```css
    input::-webkit-input-list-button

    input::-webkit-input-speech-button

    input::-webkit-textfield-decoration-container

    input::-webkit-calendar-picker-indicator
  22. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 15 additions and 1 deletion.
    16 changes: 15 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,9 @@ input[type=search]::-webkit-search-decoration

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

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

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


    @@ -60,6 +62,10 @@ input[type=range]::-webkit-slider-thumb:disabled

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

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

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

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

    input[type=range]::-ms-fill-lower
    @@ -134,6 +140,10 @@ WebKit provides a spinner control by default for number picker inputs. While you
    ```css
    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
    @@ -233,6 +243,10 @@ Gecko and Webkit applies following pseudo-elements to there inputs.
    ```css
    input::-webkit-input-list-button

    input::-webkit-textfield-decoration-container

    input::-webkit-calendar-picker-indicator

    input::-moz-focus-inner

    input::-ms-clear
  23. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 26 additions and 2 deletions.
    28 changes: 26 additions & 2 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,15 +6,15 @@ tbd.

    `::-webkit-input-speech-button`

    `::-webkit-details-marker`


    &lt;input type="search"&gt;
    -------------

    ```css
    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
    @@ -79,6 +79,18 @@ input[type=range]::-ms-track
    input[type=range]::ms-tooltip
    ```


    &lt;input type="time"&gt;
    -------------
    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.

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

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


    &lt;input type="date"&gt;
    -------------
    The following pseudo-elements are made available by WebKit for customizing a date input’s textbox.
    @@ -99,6 +111,8 @@ 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
    ```


    @@ -220,6 +234,8 @@ Gecko and Webkit applies following pseudo-elements to there inputs.
    input::-webkit-input-list-button

    input::-moz-focus-inner

    input::-ms-clear
    ```


    @@ -240,6 +256,14 @@ select::-ms-expand
    ```


    &lt;details&gt;
    -------------

    ```css
    details::-webkit-details-marker
    ```


    &lt;img&gt;
    -------------
    ```css
  24. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 23 additions and 1 deletion.
    24 changes: 23 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -144,12 +144,25 @@ input[type=radio]::-ms-check
    ```


    &lt;input type="text"&gt;
    -------------
    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.

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

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


    &lt;input type="password"&gt;
    -------------
    Trident provides a control on password inputs that can be pressed to display the password in plain text.
    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.

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

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


    @@ -218,6 +231,15 @@ button::-moz-focus-inner
    ```


    &lt;select&gt;
    -------------
    As of IE10 Trident gives you a hook to style the arrow within select dropdowns.

    ```css
    select::-ms-expand
    ```


    &lt;img&gt;
    -------------
    ```css
  25. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,6 +72,8 @@ 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]::ms-tooltip
  26. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 24 additions and 1 deletion.
    25 changes: 24 additions & 1 deletion pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,7 @@ input[type=file] > input[type=button]::-moz-focus-inner

    &lt;input type="range"&gt;
    -------------
    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.
    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.

    ```css
    input[type=range]::-webkit-slider-container
    @@ -61,6 +61,20 @@ input[type=range]::-webkit-slider-thumb:disabled
    input[type=range]::-webkit-slider-thumb:hover

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

    input[type=range]::ms-tooltip
    ```

    &lt;input type="date"&gt;
    @@ -128,6 +142,15 @@ input[type=radio]::-ms-check
    ```


    &lt;input type="password"&gt;
    -------------
    Trident provides a control on password inputs that can be pressed to display the password in plain text.

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


    &lt;input type="reset"&gt;
    -------------

  27. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 24 additions and 24 deletions.
    48 changes: 24 additions & 24 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,30 +9,6 @@ tbd.
    `::-webkit-details-marker`


    &lt;input type="reset"&gt;
    -------------

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


    &lt;input type="submit"&gt;
    -------------

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


    &lt;input type="button"&gt;
    -------------

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


    &lt;input type="search"&gt;
    -------------

    @@ -152,6 +128,30 @@ input[type=radio]::-ms-check
    ```


    &lt;input type="reset"&gt;
    -------------

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


    &lt;input type="submit"&gt;
    -------------

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


    &lt;input type="button"&gt;
    -------------

    ```css
    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.*
  28. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -83,6 +83,8 @@ input[type=range]::-webkit-media-slider-thumb
    input[type=range]::-webkit-slider-thumb:disabled

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

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

    &lt;input type="date"&gt;
    @@ -174,9 +176,12 @@ WebKit provides a pseudo-element that can be used to customize the dropdown that

    &lt;input&gt;
    -------------
    Gecko and Webkit applies following pseudo-elements to there inputs.

    ```css
    input::-webkit-input-list-button

    input::-moz-focus-inner
    ```


  29. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 40 additions and 3 deletions.
    43 changes: 40 additions & 3 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,10 +4,38 @@ All Trident pseudo-elements listed here were added in IE10 and will not work in

    tbd.

    ::-webkit-input-speech-button
    `::-webkit-input-speech-button`

    `::-webkit-details-marker`


    &lt;input type="reset"&gt;
    -------------

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


    &lt;input type="submit"&gt;
    -------------

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


    &lt;input type="button"&gt;
    -------------

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


    &lt;input type="search"&gt;
    -------------

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

    @@ -18,12 +46,11 @@ input[type=search]::-webkit-search-results-decoration
    input[type=search]::-webkit-search-results-button
    ```

    `::-webkit-details-marker`


    &lt;input type="file"&gt;
    -------------
    WebKit provides a hook for its file input button with the pseudo-element.

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

    @@ -34,6 +61,8 @@ 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
    ```

    &lt;input type="range"&gt;
    @@ -151,6 +180,14 @@ input::-webkit-input-list-button
    ```


    &lt;button&gt;
    -------------

    ```css
    button::-moz-focus-inner
    ```


    &lt;img&gt;
    -------------
    ```css
  30. Aurelius Wendelken revised this gist Dec 4, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -188,6 +188,8 @@ 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