風格輸入範圍之前和之後

我是從CSS-Tricks跟隨this method來設置輸入範圍的樣式，並嘗試使用僞類之前和之後。以下是我試過的代碼：風格輸入範圍之前和之後

input[type=range]::-webkit-slider-thumb:before { 
    background: #fff; 
}

這似乎沒有辦法。有人可以幫助我如何設計滑塊軌道。我需要一個純CSS解決方案。基本上我想要它look like this。

我還將粘貼CSS-技巧的代碼：

input[type=range] { 
    -webkit-appearance: none; 
    margin: 18px 0; 
    width: 100%; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    background: #3071a9; 
    border-radius: 1.3px; 
    border: 0.2px solid #010101; 
} 
input[type=range]::-webkit-slider-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    -webkit-appearance: none; 
    margin-top: -14px; 
} 
input[type=range]:focus::-webkit-slider-runnable-track { 
    background: #367ebd; 
} 
input[type=range]::-moz-range-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    background: #3071a9; 
    border-radius: 1.3px; 
    border: 0.2px solid #010101; 
} 
input[type=range]::-moz-range-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 
input[type=range]::-ms-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    background: transparent; 
    border-color: transparent; 
    border-width: 16px 0; 
    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: #2a6495; 
    border: 0.2px solid #010101; 
    border-radius: 2.6px; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
} 
input[type=range]::-ms-fill-upper { 
    background: #3071a9; 
    border: 0.2px solid #010101; 
    border-radius: 2.6px; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
} 
input[type=range]::-ms-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #3071a9; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #367ebd; 
}

來源

2015-01-26 ChaniLastnamé

輸入不允許：之前和之後：在僞元素之後，您必須嘗試不同的方式。 – 2015-01-26 22:30:08

您正在查詢報價 – Dummy 2015-01-26 22:51:16

延遲迴復這裏的位：

甲純CSS溶液是不可能的跨瀏覽器在這裏 - IE是隻有一個可以通過::-ms-fill-lower和::-ms-fill-upper

對於完整的跨瀏覽器解決方案，您需要使用js。這裏有與輸入的值來粗略你以後做更新CSS漸變的例子：http://codepen.io/ryanttb/pen/fHyEJ

您還可以找到這方面的信息在此回答一個類似的問題：Style lower and upper fill in HTML5 range input

來源

2015-04-10 15:39:20 lpslater

這是可能的Firefox和IE瀏覽器 -

// Mozilla  
input[type="range"]::-moz-range-progress { 
    background: #cc1a1a; 
    height: 12px; 
    border-radius: 12px; 
} 
// IE 
input[type="range"]::-ms-fill-lower { 
    background: #CC1A1A; 
    border: 0 solid #000101; 
    border-radius: 50px; 
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; 
} 
input[type="range"]::-ms-fill-upper { 
    background: #c0c0c0; 
    border: 0 solid #000101; 
    border-radius: 50px; 
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; 
}

只有一個辦法是針對Chrome :before和:after，不支持任何更多（自2016年3月）。我發現的最好的 - 是http://rangeslider.js.org/。它也可以和Angular JS一起工作 - https://github.com/danielcrisp/angular-rangeslider

來源

2016-03-17 14:10:45

風格輸入範圍之前和之後

回答

相關問題