Skip to content

Instantly share code, notes, and snippets.

@JSoon

JSoon/webkit-pseudo-elements.md

Forked from leostratus/webkit-pseudo-elements.md
Created October 9, 2021 06:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JSoon/0df1d08c742af8af3199c6c712525c0a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JSoon/0df1d08c742af8af3199c6c712525c0a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Angelina Fabbro revised this gist Oct 7, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk. I'm in the WebKit source so you don't have to be!
    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.

  2. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -139,10 +139,15 @@ 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)
    @@ -168,3 +173,7 @@ Unsorted/Haven't investigated usage at all yet (Could contain dupes)
    -webkit-progress-bar-value

    -webkit-resizer




  3. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 29 additions and 11 deletions.
    40 changes: 29 additions & 11 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -124,29 +124,47 @@ Form validation message-bubbe (WebKit r82180 or later)

    `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
    -webkit-scrollbar
    -webkit-scrollbar-button
    -webkit-scrollbar-corner
    -webkit-scrollbar-thumb
    -webkit-scrollbar-track
    -webkit-scrollbar-track-piece
    -webkit-search-cancel-button
    -webkit-search-decoration
    -webkit-search-results-button
    -webkit-search-results-decoration

    -webkit-resizer
  4. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 24 additions and 24 deletions.
    48 changes: 24 additions & 24 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@ A friendly reminder that you may need to set this property on your target/select

    `video::-webkit-media-controls-current-time-display`

    `video:-webkit-full-page-media::-webkit-media-controls-panel`
    `video::-webkit-full-page-media::-webkit-media-controls-panel`

    `video::-webkit-media-controls-timeline-container`

    @@ -88,6 +88,24 @@ A friendly reminder that you may need to set this property on your target/select

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

    @@ -96,6 +114,7 @@ A friendly reminder that you may need to set this property on your target/select
    `progress::-webkit-progress-value`

    <meter>
    -------------

    `meter::-webkit-progress-bar`

    @@ -105,37 +124,18 @@ A friendly reminder that you may need to set this property on your target/select

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


    Unsorted
    --------
    Unsorted/Haven't investigated usage at all yet (Could contain dupes)
    --------------------------------------------------------------------
    -webkit-inner-spin-button
    -webkit-input-placeholder
    -webkit-input-speech-button
    -webkit-media-controls-current-time-display
    -webkit-media-controls-fullscreen-button
    -webkit-media-controls-mute-button
    -webkit-media-controls-panel
    -webkit-media-controls-play-button
    -webkit-media-controls-return-to-realtime-button
    -webkit-media-controls-rewind-button
    -webkit-media-controls-seek-back-button
    -webkit-media-controls-seek-forward-button
    -webkit-media-controls-status-display
    -webkit-media-controls-time-remaining-display
    -webkit-media-controls-timeline
    -webkit-media-controls-timeline-container
    -webkit-media-controls-toggle-closed-captions-button
    -webkit-media-controls-volume-slider
    -webkit-media-controls-volume-slider-container
    -webkit-media-controls-volume-slider-mute-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-meter-vertical-even-less-good-value
    -webkit-meter-vertical-optimum-value
    -webkit-meter-vertical-suboptimal-value

    -webkit-outer-spin-button
    -webkit-progress-bar-value
    -webkit-resizer
  5. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 69 additions and 5 deletions.
    74 changes: 69 additions & 5 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -79,10 +79,74 @@ A friendly reminder that you may need to set this property on your target/select

    <input type="range">
    -------------------
    `input[type="range"]::-webkit-slider-thumb'

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


    <input type="file">
    -------------------------

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

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


    Unsorted
    --------
    -webkit-inner-spin-button
    -webkit-input-placeholder
    -webkit-input-speech-button
    -webkit-media-controls-current-time-display
    -webkit-media-controls-fullscreen-button
    -webkit-media-controls-mute-button
    -webkit-media-controls-panel
    -webkit-media-controls-play-button
    -webkit-media-controls-return-to-realtime-button
    -webkit-media-controls-rewind-button
    -webkit-media-controls-seek-back-button
    -webkit-media-controls-seek-forward-button
    -webkit-media-controls-status-display
    -webkit-media-controls-time-remaining-display
    -webkit-media-controls-timeline
    -webkit-media-controls-timeline-container
    -webkit-media-controls-toggle-closed-captions-button
    -webkit-media-controls-volume-slider
    -webkit-media-controls-volume-slider-container
    -webkit-media-controls-volume-slider-mute-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-meter-vertical-even-less-good-value
    -webkit-meter-vertical-optimum-value
    -webkit-meter-vertical-suboptimal-value
    -webkit-outer-spin-button
    -webkit-progress-bar-value
    -webkit-resizer
    -webkit-scrollbar
    -webkit-scrollbar-button
    -webkit-scrollbar-corner
    -webkit-scrollbar-thumb
    -webkit-scrollbar-track
    -webkit-scrollbar-track-piece
    -webkit-search-cancel-button
    -webkit-search-decoration
    -webkit-search-results-button
    -webkit-search-results-decoration

    Unsorted/Untested
    -----------------

    `-webkit-file-upload-button`
  6. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 57 additions and 29 deletions.
    86 changes: 57 additions & 29 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,12 @@
    Have to fight the good fight and compile a list of these selectors. Please submit if you know of any I have missed.
    An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk. I'm in the WebKit source so you don't have to be!

    Remember to set this property on the elements you select to get the control you need to modify their appearance:
    Everything is broken up by tag, but within each the selectors aren't particularly ordered.

    `-webkit-appearance:none;`
    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>
    -------------
    @@ -17,14 +19,65 @@ Remember to set this property on the elements you select to get the control you

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

    input[type="range"]
    `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'

    @@ -33,28 +86,3 @@ Unsorted/Untested
    -----------------

    `-webkit-file-upload-button`
    + (audio::-webkit-media-controls-panel):
    + (video::-webkit-media-controls-panel):
    + (video:-webkit-full-page-media::-webkit-media-controls-panel):
    + (audio::-webkit-media-controls-mute-button):
    + (video::-webkit-media-controls-mute-button):
    + (audio::-webkit-media-controls-play-button):
    + (video::-webkit-media-controls-play-button):
    + (audio::-webkit-media-controls-timeline-container):
    + (video::-webkit-media-controls-timeline-container):
    + (audio::-webkit-media-controls-current-time-display):
    + (video::-webkit-media-controls-current-time-display):
    + (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    + (audio::-webkit-media-controls-timeline):
    + (video::-webkit-media-controls-timeline):
    + (audio::-webkit-media-controls-volume-slider-container):
    + (video::-webkit-media-controls-volume-slider-container):
    + (audio::-webkit-media-controls-volume-slider):
    + (video::-webkit-media-controls-volume-slider):
    + (audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button):
    + (audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button):
    + (audio::-webkit-media-controls-fullscreen-button):
    + (video::-webkit-media-controls-fullscreen-button):
    + (audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button):
    + (audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button):
    + (audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):
  7. Angelina Fabbro revised this gist Sep 21, 2012. 2 changed files with 60 additions and 22 deletions.
    60 changes: 60 additions & 0 deletions webkit-pseudo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    Have to fight the good fight and compile a list of these selectors. Please submit if you know of any I have missed.

    Remember to set this property on the elements you select to get the control you need to modify their appearance:

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

    `video::-webkit-media-controls-current-time-display`

    <audio>
    -------------

    input[type="range"]
    -------------------
    `input[type="range"]::-webkit-slider-thumb'


    Unsorted/Untested
    -----------------

    `-webkit-file-upload-button`
    + (audio::-webkit-media-controls-panel):
    + (video::-webkit-media-controls-panel):
    + (video:-webkit-full-page-media::-webkit-media-controls-panel):
    + (audio::-webkit-media-controls-mute-button):
    + (video::-webkit-media-controls-mute-button):
    + (audio::-webkit-media-controls-play-button):
    + (video::-webkit-media-controls-play-button):
    + (audio::-webkit-media-controls-timeline-container):
    + (video::-webkit-media-controls-timeline-container):
    + (audio::-webkit-media-controls-current-time-display):
    + (video::-webkit-media-controls-current-time-display):
    + (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    + (audio::-webkit-media-controls-timeline):
    + (video::-webkit-media-controls-timeline):
    + (audio::-webkit-media-controls-volume-slider-container):
    + (video::-webkit-media-controls-volume-slider-container):
    + (audio::-webkit-media-controls-volume-slider):
    + (video::-webkit-media-controls-volume-slider):
    + (audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button):
    + (audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button):
    + (audio::-webkit-media-controls-fullscreen-button):
    + (video::-webkit-media-controls-fullscreen-button):
    + (audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button):
    + (audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button):
    + (audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):
    22 changes: 0 additions & 22 deletions webkit-psuedo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +0,0 @@
    Have to fight the good fight and compile a list of these selectors. Please submit if you know of any I have missed.

    Remember to set this property on the elements you select to get the control you need to modify their appearance:

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

    `video::-webkit-media-controls-current-time-display`
  8. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 14 additions and 6 deletions.
    20 changes: 14 additions & 6 deletions webkit-psuedo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,22 @@
    Have to fight the good fight and compile a list of these selectors. Please submit if you know of any I have missed.

    Remember to set this property on the elements you select to get the control you need to modify their appearance:

    `-webkit-appearance:none;`



    <video>
    -------

    video::-webkit-media-controls-panel
    `video::-webkit-media-controls-panel`

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

    video::-webkit-media-controls-volume-slider-container
    `video::-webkit-media-controls-volume-slider-container`

    video::-webkit-media-controls-volume-slider
    `video::-webkit-media-controls-volume-slider`

    video::-webkit-media-controls-timeline
    `video::-webkit-media-controls-timeline`

    video::-webkit-media-controls-current-time-display
    `video::-webkit-media-controls-current-time-display`
  9. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webkit-psuedo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <video>
    &lt;video&gt;
    -------

    video::-webkit-media-controls-panel
  10. Angelina Fabbro revised this gist Sep 21, 2012. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions webkit-psuedo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,14 @@
    <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-timeline

    video::-webkit-media-controls-current-time-display
  11. Angelina Fabbro created this gist Sep 21, 2012.
    6 changes: 6 additions & 0 deletions webkit-psuedo-elements.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    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-timeline
    video::-webkit-media-controls-current-time-display