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] {
| <ul class="swatches red"> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> |
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| @charset "utf-8"; | |
| // iconfont 配置 | |
| // @file: _config.scss |
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| @charset "utf-8"; | |
| // iconfont 配置 | |
| // @file: _config.scss |
| <div class="box"> | |
| <span class="caret-top"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-right"></span> | |
| </div> | |
| <div class="box"> | |
| <span class="caret-bottom"></span> | |
| </div> | |
| <div class="box"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen · A Pen by airen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css"> |
| /** | |
| * CSS3 ribbon buttons | |
| */ | |
| .ribbonA{ | |
| position: relative; | |
| display: block; | |
| width: 258px; | |
| height: 50px; | |
| font: .9em/50px Georgia, "Times New Roman", Times, serif; |
| <ul> | |
| <li><div>1</div></li> | |
| <li><div>2</div></li> | |
| <li><div>3</div></li> | |
| <li><div>4</div></li> | |
| <li><div>5</div></li> | |
| <li><div>6</div></li> | |
| <li><div>7</div></li> | |
| <li><div>8</div></li> | |
| <li><div>9</div></li> |
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| .a { | |
| color: red; | |
| .b { | |
| color: green; |