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] {
| /** | |
| * | |
| * Adobe Test and Target doesn't really have a nice API for dynamically including content, so this wraps it to provide that. | |
| * | |
| * What T&T wants you to do is simply define an "mbox" div on a page, call them and tell them the id of that div, and they handle | |
| * populating content to that div. | |
| * | |
| * What I prefer to do is simply make a service call to T&T, have them give me some data/configuration back, and I will handle rendering | |
| * content, however I see fit. | |
| * |
| <!DOCTYPE html> | |
| <!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Breakpoint detection test</title> | |
| <style type="text/css" media="screen"> | |
| @media screen and (min-width: 320px) { | |
| #page:after { | |
| content: 'smallest'; /* represent the current width-bracket */ |
| // Place user-specific overrides in this file, to ensure they're preserved | |
| // when upgrading | |
| { | |
| "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "node_modules"] | |
| } |
| // ---------------------------------------------------------- | |
| // A short snippet for detecting versions of IE in JavaScript | |
| // without resorting to user-agent sniffing | |
| // ---------------------------------------------------------- | |
| // If you're not in IE (or IE version is less than 5) then: | |
| // ie === undefined | |
| // If you're in IE (>=5) then you can determine which version: | |
| // ie === 7; // IE7 | |
| // Thus, to detect IE: | |
| // if (ie) {} |