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：造型範圍輸入？

回答

相關問題