blob: 4115432745307658ac9e6da920a71b52a3a97ac1 (
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
48
49
|
---
title: '::-webkit-slider-thumb'
slug: 'Web/CSS/::-webkit-slider-thumb'
tags:
- CSS
- Input
translation_of: 'Web/CSS/::-webkit-slider-thumb'
---
<h2 id="总结">总结</h2>
<p> <strong><code>::-webkit-slider-thumb</code></strong></p>
<p>这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效</p>
<h2 id="使用方式">使用方式</h2>
<p>该伪类需要配和<strong>::-webkit-slider-runnable-track</strong>使用,否则会没有效果.......</p>
<p>input[type=range]::-webkit-slider-thumb{<br>
-webkit-appearance: none;/*清除默认样式*/<br>
height:7vw;/*设置滑块高度*/<br>
width:5vw;/*设置滑块宽度*/<br>
background:#000;/*设置背景色*/<br>
border-radius:10vw 10vw;/*加个圆角边*/<br>
margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/<br>
}<br>
input[type=range]::-webkit-slider-runnable-track{<br>
border-radius: 30px; <br>
background:#128;<br>
height:15px;<br>
}</p>
<h2 id="规范">规范</h2>
<p>这不是任何规范中的一部分,这是webkit/bink内核特有的(chrome/safari)</p>
<h2 id="另请参阅">另请参阅</h2>
<ul>
<li>::-webkit-slider-runnable-track</li>
<li>其他浏览器内与该功能类似的伪类
<ul>
<li>::-moz-range-thumb</li>
<li>::-ms-thumb</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>
|
