---
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>