initial commit

1 files changed, 49 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..4115432745
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,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>