29
C'è un modo per definire il controllo dell'intervallo di HTML5? È possibile cambiare il colore della linea su cui scorre il cursore?C'è un modo per definire il controllo dell'intervallo di HTML5?
A
risposta
36
risulta, non v'è in WebKit:
input[type="range"]{
-webkit-appearance:none !important;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
}
È quindi possibile aggiungere qualsiasi attributi è necessario ogni quei selettori. Sfondo, sfumatura, ecc ...
Spero che ti aiuti!
12
Un esempio completo di css per la personalizzazione (in questo momento per 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);
}
+0
cos'è -wekkit *? l'hai in alcuni posti e non sono sicuro se sia intenzionale o accidentale. – funkymushroom
+0
è un prefisso per i browser basati sul motore WebKit (fornitore CSS) http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm – shakaran
+0
Mi chiedevo di "-wekkit" (notare il doppio k) in alcune delle righe sopra, al contrario dello standard "-webkit". Penso che sia probabilmente un refuso. :) – funkymushroom
1
Sulla sommità risposta sua già descritto. Lo personalizzo solo sulla mia strada. Dai uno sguardo potrebbe aiutarti.
Aggiungi al di sotto codice 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;
}
Problemi correlati
- 1. Qual è il modo corretto per dichiarare un Doctype HTML5.
- 2. C'è un modo per impostare il volume HTML5-Video predefinito?
- 3. Controllo JavaScript per HTML5 e CSS3
- 4. Cercare un buon modo per definire le regole per il decompilatore, ho bisogno di un consiglio
- 5. Controllo dell'aspetto dell'effetto trascinamento HTML5
- 6. La casella di controllo HTML5 corretta è
- 7. Un modo per disabilitare il controllo dell'host noto con JSch?
- 8. Il modo più leggibile per scrivere un semplice controllo condizionale
- 9. C'è un modo per definire un array costante in PHP?
- 10. il modo migliore per creare video dall'animazione html5
- 11. Il modo migliore per definire una classe immutabile nell'obiettivo C
- 12. Qual è il modo drupal per definire le costanti globali?
- 13. Il modo migliore per definire l'attività javah nel gradle
- 14. Come rilevare se un controllo di input HTML5 è supportato?
- 15. quale è il modo migliore per definire una funzione?
- 16. modo corretto per definire un elemento dom vuoto React
- 17. Esiste un modo semplice per determinare i limiti visibili di un controllo per ottimizzare il rendering?
- 18. HTML5 File API controllo semplice se il file esiste
- 19. C'è un modo per definire caratteri speciali personalizzati in HTML?
- 20. Il modo migliore per riprodurre suoni con HTML5 e Javascript
- 21. Il modo migliore per stratificare in HTML5 Canvas?
- 22. Definire controllo come variabile in Mathematica
- 23. Il controllo di più file esiste? Un modo migliore?
- 24. C'è un modo per localizzare input type = "data" in HTML5
- 25. C'è un modo per sincronizzare automaticamente html5 localstorage tra computer
- 26. il modo migliore per il controllo nullo in kotlin?
- 27. Esiste un modo migliore per implementare il controllo della versione per il contenuto del database?
- 28. È possibile sostituire Loader di un SO? Un modo per ottenere il controllo su Loader?
- 29. Esiste un modo semplice per modificare il comportamento di un controllo Java/Swing quando viene attivato?
- 30. C'è un modo per trovare il thread del proprietario di un controllo?
suo solo nascondere il controllo della gamma. Come stilizzarlo? Intendo quali proprietà dobbiamo impostare? – coure2011
aggiungi qualcosa come: height: 20px; colore di sfondo: rosso; –
Sì, è possibile. Controlla questo link http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/ – Teknotica