Styling plage d'entrée inférieure en CSS pour Webkit?

Question

Je suis de style input[type=range] en utilisant CSS, et fait avec thumb et track.
Tous les trois (-ms, -moz, -webkit) ont le préfixe approprié. Mais, je ne sais pas quel préfixe de vendeur est adapté au style progress sur navigateur Webkit, tels que Chrome. Sur Internet Explorer et Microsoft Edge, -ms-fill-lower fonctionne très bien.
Sur Firefox, l'utilisation de -moz-range-progress a résolu le problème.

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" />

Cet exemple fonctionnera comme je m'y attendais sur Microsoft Edge, MOZ: // un Firefox et Internet Explorer, mais regarde différemment sur Chrome.

Je l'ai déjà lu Styling input range for webkit with pure CSS et essayé sur le mien,
mais il fonctionne étrangement lorsque plusieurs entrées [type = plage] s sont sur un seul document. Donc, la question est,
Y a-t-il un préfixe de vendeur approprié pour la piste de style que le pouce est déjà passé, seulement en utilisant CSS? Au meilleur de ma connaissance, ce n'est pas possible.

Answer 1

Ci-dessous un extrait de Chrome montrant les éléments DOM Ombre pour <input type="range" />:

<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> 

En général, vous voudrez peut-être jeter un oeil à range.css, il est un générateur de code multi-navigateur pour curseurs de plage personnalisée. Toutefois, il ne fournit pas un moyen de style la région ::-moz-range-progress. L'autre exemple que j'ai trouvé, y compris cet extrait de Codepen, utilise le sélecteur de shadow-piercing obsolète et non-fonctionnel deep. Pour une solution de navigateur complet, vous devrez créer votre propre élément.