blob: 32d1b0145b98b42dce165d7ea423137aa38a1fc3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
---
title: '::-webkit-slider-runnable-track'
slug: 'Web/CSS/::-webkit-slider-runnable-track'
tags:
- CSS
- Input
translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
---
<div><strong><code>::-webkit-slider-runnable-track</code></strong></div>
<div> 表示其在type为range的input标签内中的滑块凹槽,也就是滑块可滑动的区域</div>
<div> </div>
<div> </div>
<div> </div>
<p> </p>
<h3 id="使用方法"><strong>使用方法:</strong></h3>
<div>input[type=range]<strong><code>::-webkit-slider-runnable-track</code></strong><code>{</code></div>
<div> border-radius: 10px; //为凹槽添加圆角边</div>
<div> background:#eee;//修改背景色</div>
<div><code>}</code></div>
<h3 id="Specification" name="Specification">规范</h3>
<p><strong><code>::-webkit-slider-runnable-track</code></strong>不是任何规范的一部分。这是WebKit/Blink特有的伪元素(也就是chrome/sarfri浏览器内核特有的)</p>
<h3 id="See_also" name="See_also">另请参阅</h3>
<ul>
<li>::-webkit-slider-thumb</li>
<li>与其他浏览器内核功能类似的伪类
<ul>
<li>::-ms-track</li>
<li>::-moz-range-track</li>
</ul>
</li>
<li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
<li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
</ul>
|
