入力[type = range]目盛り付きスタイリング

Question

これはTicks for type=“range” HTML inputへのフォローアップの質問です。 CSS-トリックで、彼らは...クロスブラウザのスタイルに非常にうまく機能type=range入力、Styling Cross-Browser Compatible Range Inputs with CSSを、方法を説明したCSSを除き、

input[type=range] { 
 
    appearance: none;/*does not validate*/ 
 
    -o-appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none;/*kills tick marks*/ 
 
}

<div> 
 
    <input type="range" list="Z"> 
 
    <datalist id="Z"> 
 
    <option>10</option> 
 
    <option>20</option> 
 
    <option>30</option> 
 
    <option>40</option> 
 
    <option>50</option> 
 
    <option>60</option> 
 
    <option>70</option> 
 
    <option>80</option> 
 
    <option>90</option> 
 
    <option>100</option> 
 
    <option>110</option> 
 
    </datalist> 
 
</div>

は、定義された任意のダニを殺しますマークアップによって。

<div> 
 
    <input type="range" list="Z"> 
 
    <datalist id="Z"> 
 
    <option>10</option> 
 
    <option>20</option> 
 
    <option>30</option> 
 
    <option>40</option> 
 
    <option>50</option> 
 
    <option>60</option> 
 
    <option>70</option> 
 
    <option>80</option> 
 
    <option>90</option> 
 
    <option>100</option> 
 
    <option>110</option> 
 
    </datalist> 
 
</div>

標準は目盛りと範囲のスタイリングを許可していますか？それとも、私はそこにイメージをぶちこませて、それを終わらせるべきですか？

Answer 1

私は一種の-slider-runnable-track-含む要素の背景と同じの背景色を作ることによって、それをハックすることができました。この

input[type="range"]

http://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

ように使用してください。私は、Webブラウザのみのコードを含んでいます。他のブラウザは、わかりやすいでしょう：

input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; 
    background: rgb(255,255,255); 
} 

これは、スライドバーを隠すが、目盛りを維持する。

ここにフィドルがあります：https://jsfiddle.net/ffp8ner5/