Styling Eingabebereich in CSS für Webkit niedriger?

Question

Ich bin Styling input[type=range] mit CSS, und fertig mit thumb und track.
Alle drei (-ms, -moz, -webkit) Browser verfügen über ein korrektes Präfix.

Aber ich weiß nicht, welche Vendor-Präfix passt zum Stil progress auf Webkit-Browser, wie Chrome. Auf Internet Explorer und Microsoft Edge funktioniert -ms-fill-lower großartig.
Bei Firefox löste das Problem mit -moz-range-progress.

input[type=range] { 
 
\t /*removes default webkit styles*/ 
 
\t -webkit-appearance: none; 
 
\t 
 
\t /*fix for FF unable to apply focus style bug */ 
 
\t border: 1px solid white; 
 
\t 
 
\t /*required for proper track sizing in FF*/ 
 
\t width: 350px; 
 
} 
 

 
/* Webkit, Chrome & Safari */ 
 
input[type=range]::-webkit-slider-runnable-track { 
 
\t width: 300px; 
 
\t height: 5px; 
 
\t background: #ccc; 
 
\t border: none; 
 
\t border-radius: 3px; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
\t -webkit-appearance: none; 
 
\t border: none; 
 
\t height: 16px; 
 
\t width: 16px; 
 
\t border-radius: 50%; 
 
\t background: #004d66; 
 
\t margin-top: -7px; 
 
} 
 
input[type=range]:focus { 
 
\t outline: none; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
\t background: #ddd; 
 
} 
 
/* moz://a Firefox */ 
 
input[type=range]::-moz-range-track { 
 
\t /* width: 150px; 
 
\t height: 5px; */ 
 
\t background: #ccc; 
 
\t border: none; 
 
\t border-radius: 3px; 
 
} 
 
input[type=range]::-moz-range-thumb { 
 
\t border: none; 
 
\t height: 16px; 
 
\t width: 16px; 
 
\t border-radius: 50%; 
 
\t background: #004d66; 
 
} 
 
input[type=range]::-moz-range-progress { 
 
\t background: #33ccff; 
 
\t border-radius: 10px; 
 
\t height: 5px; 
 
} 
 

 
/*hide the outline behind the border*/ 
 
input[type=range]:-moz-focusring{ 
 
\t outline: 1px solid white; 
 
\t outline-offset: -1px; 
 
} 
 

 

 
/* Microsoft */ 
 
input[type=range]::-ms-track { 
 
\t 
 
\t height: 2px; 
 
\t /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ 
 
\t background: transparent; 
 
\t 
 
\t /*leave room for the larger thumb to overflow with a transparent border */ 
 
\t border-color: transparent; 
 
\t border-width: 6px 0; 
 

 
\t /*remove default tick marks*/ 
 
\t color: transparent; 
 
} 
 
input[type=range]::-ms-thumb { 
 
\t border: none; 
 
\t height: 16px; 
 
\t width: 16px; 
 
\t border-radius: 50%; 
 
\t background: #004d66; 
 
\t margin-top: 1px; 
 
} 
 
input[type=range]::-ms-fill-lower { 
 
\t background: #33ccff; 
 
\t border-radius: 10px; 
 
\t height: 5px; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
\t background: #ccc; 
 
\t border-radius: 10px; 
 
} 
 
input[type=range]:focus::-ms-fill-lower { 
 
\t background: #44ddff; 
 
} 
 
input[type=range]:focus::-ms-fill-upper { 
 
\t background: #ddd; 
 
}

<input type="range" />

Dieses Beispiel wird, wie ich auf Microsoft Edge erwartet funktionieren, moz: // ein Firefox und Internet Explorer, aber sieht anders auf Chrome.

ich schon gelesen Styling input range for webkit with pure CSS und versuchte auf meinem,
aber es funktioniert seltsam, wenn mehrere input [type = range] s auf einem Dokument ist.

Also, die Frage ist,
Gibt es ein richtiges Vender Präfix für Styling Track, dass Daumen bereits übergeben wird, nur mit CSS?

Answer 1

Dies ist meines Wissens nach nicht möglich. Im Folgenden ist ein Ausschnitt aus Chrom, die Schatten von DOM-Elemente für <input type="range" /> zeigt:

<input type="range"> 
    #shadow-root (user-agent) 
     <div style="-webkit-appearance:inherit"> 
      <div pseudo="-webkit-slider-runnable-track" id="track"> 
       <div id="thumb"> 
       </div> 
     </div> 
    </div> 
</input> 

Im Allgemeinen Sie vielleicht einen Blick auf range.css nehmen wollen, dann ist es ein Cross-Browser-Code-Generator für Schieber benutzerdefinierten Bereichs. Es bietet jedoch keine Möglichkeit, die ::-moz-range-progress Region zu stylen. Andere Beispiele, die ich gefunden habe, einschließlich dieses Codepen Ausschnitts, verwenden den veralteten und nicht länger funktionsfähigen deep Schatten-Piercing-Selektor. Für eine vollständig browserübergreifende Lösung müssen Sie ein eigenes Element erstellen.