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