CSS：造型范围输入？

我不知道如何风格一定范围的输入使用自己的图像作为拇指，使拇指厚和更大的线下。

我没有把一个非常基本的例子在这个FIDDLE

它甚至有可能使用自己的图像范围拇指和如何将我去拍行厚，更长等？

这是我的CSS：

input[type=range] { 
    -webkit-appearance: none; 
    background-color: blue; 
    width: 200px; 
    height:20px; 

} 

input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: #666; 
    opacity: 0.5; 
    width: 10px; 
    height: 26px; 
    background-image:url('THUMB-ICON.png'); 
}

任何建议，将不胜感激。

取得了一些进展，我认为：https://jsfiddle.net/BNm8j/5586/

编辑：

我做了一些改动，但我不知道为什么拇指顶缺什么？

https://jsfiddle.net/BNm8j/5588/

任何想法吗？

来源

2016-05-23 Jackson

看一看这个答案，它可以帮助你 - http://stackoverflow.com/questions/34850327/styling-input-range-for-webkit-with-pure-css/34850882#34850882 – Harry

在div中添加你的输入，并添加一些填充到这个div：https://jsfiddle.net/BNm8j/5589/ – Tico

@Tico，它做到了交配。干杯。 – Jackson

这里是例子链接的原始CSS：

<div id="DIV_1"> 
    <div id="DIV_2"> 
    </div><a id="A_3"></a> 
</div>

希望这可以帮助你。

enter code here 
#DIV_1 { 
    box-sizing: border-box; 
    color: rgb(92, 92, 92); 
    float: left; 
    height: 11px; 
    overflow-wrap: break-word; 
    position: relative; 
    touch-action: none; 
    width: 705px; 
    word-wrap: break-word; 
    column-rule-color: rgb(92, 92, 92); 
    perspective-origin: 352.5px 5.5px; 
    transform-origin: 352.5px 5.5px; 
    background: rgb(222, 222, 222) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(92, 92, 92); 
    border-radius: 3px 3px 3px 3px; 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    margin: 11px 30px 0px; 
    outline: rgb(92, 92, 92) none 0px; 
}/*#DIV_1*/ 

#DIV_2 { 
    box-sizing: border-box; 
    color: rgb(92, 92, 92); 
    height: 11px; 
    overflow-wrap: break-word; 
    position: absolute; 
    top: 0px; 
    width: 122px; 
    word-wrap: break-word; 
    column-rule-color: rgb(92, 92, 92); 
    perspective-origin: 61px 5.5px; 
    transform-origin: 61px 5.5px; 
    background: rgb(0, 143, 213) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(92, 92, 92); 
    border-radius: 3px 3px 3px 3px; 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    outline: rgb(92, 92, 92) none 0px; 
}/*#DIV_2*/ 

#A_3 { 
    background-position: -65px 0px; 
    box-sizing: border-box; 
    color: rgb(247, 144, 47); 
    cursor: default; 
    display: block; 
    height: 59px; 
    left: 155px; 
    overflow-wrap: break-word; 
    position: absolute; 
    text-decoration: none; 
    top: -22px; 
    touch-action: none; 
    width: 58px; 
    word-wrap: break-word; 
    z-index: 100; 
    column-rule-color: rgb(247, 144, 47); 
    perspective-origin: 29px 29.5px; 
    transform-origin: 29px 29.5px; 
    background: rgba(0, 0, 0, 0) url("https://www.wonga.com/sites/all/themes/pizaz/images/mint/toolkit.png?v=2.2") no-repeat scroll -65px 0px/auto padding-box border-box; 
    border: 0px none rgb(247, 144, 47); 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    margin: 0px 0px 0px -62px; 
    outline: rgb(247, 144, 47) none 0px; 
}/*#A_3*/

来源

2016-05-23 14:56:59 ilai

CSS：造型范围输入？

回答

相关问题