C’è un modo per definire il controllo del range di HTML5?

C’è un modo per definire il controllo del range di HTML5? È ansible cambiare il colore della linea su cui scorre il cursore?

Risulta, c’è nel webkit:

input[type="range"]{ -webkit-appearance:none !important; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none !important; } 

È quindi ansible aggiungere tutti gli attributi necessari a ciascun selettore. Sfondo, sfumatura, ecc …

Spero possa aiutare!

Un esempio completo di CSS per la personalizzazione (in questo momento per il webkit):

 input[type="range"]{ background: rgb(94, 30, 30); width: 130px; height: 6px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); } input[type="range"]:hover{ background: rgb(194, 139, 131); width: 130px; height: 6px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none !important; width:25px; height:15px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border:1px solid black; background: #a90329; background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); } input[type="range"]::-webkit-slider-thumb:hover{ -webkit-appearance:none !important; width:25px; height:15px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-color:rgb(56, 13, 13); border:1px solid black; background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 ); } 

Sulla risposta superiore è già descritto. Lo personalizzo solo sulla mia strada. Dai uno sguardo potrebbe aiutarti.

Aggiungi sotto il codice su CSS:

 input:focus{ outline-color: transparent; } input[type="range"]{ -webkit-appearance:none; -moz-apperance:none; height: 6px; background-color: #b6b6b6; outline-color: transparent; } input::-webkit-slider-thumb{ -webkit-appearance:none; -moz-apperance:none; width:16px; height:16px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; background-color: #20b373; overflow: visible; } 

Dimostrazione dal vivo