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] {
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;
| <?php | |
| /** | |
| * ========================= | |
| * defaultTemplateByParentTv | |
| * ========================= | |
| * | |
| * Plugin for modX Revolution | |
| * Set default template for children of a ressource | |
| * | |
| * Author: |
| function countCSSRules() { | |
| var results = '', | |
| log = ''; | |
| if (!document.styleSheets) { | |
| return; | |
| } | |
| for (var i = 0; i < document.styleSheets.length; i++) { | |
| countSheet(document.styleSheets[i]); | |
| } | |
| function countSheet(sheet) { |
| { "keys": ["home"], "command": "move_to", "args": {"to": "bol"} }, | |
| { "keys": ["end"], "command": "move_to", "args": {"to": "eol"} } |
| /* | |
| * twitter-entities.js | |
| * This function converts a tweet with "entity" metadata | |
| * from plain text to linkified HTML. | |
| * | |
| * See the documentation here: http://dev.twitter.com/pages/tweet_entities | |
| * Basically, add ?include_entities=true to your timeline call | |
| * | |
| * Copyright 2010, Wade Simmons | |
| * Licensed under the MIT license |