Skip to content

Instantly share code, notes, and snippets.

@SIZHE1
SIZHE1 / pseudo_elements.md
Created October 29, 2018 19:13 — forked from p3t3r67x0/pseudo_elements.md
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.

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] {
@SIZHE1
SIZHE1 / webkit-pseudo-elements.md
Created October 29, 2018 19:05 — forked from leostratus/webkit-pseudo-elements.md
Webkit Pseudo-Element Selectors (Shadow DOM Elements)

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;

import os
import sys
import re
import hashlib
import csv
import time
import locale
import getopt