Comment personnaliser l'aspect du type de plage de saisie HTML5 à l'aide de CSS ?

Question

Je veux personnaliser l'apparence du type de saisie de plage en HTML5 pour qu'il ressemble à une barre de progression. J'ai essayé d'appliquer certains attributs CSS courants à l'aide de la classe CSS, mais il semble qu'ils ne fonctionnent pas.

Quelqu'un peut-il m'indiquer comment le personnaliser ?

Answer 1

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}

Answer 2

Si vous utilisez HTML 5, pourquoi ne pas utiliser l'option progress tag ?

<progress value="1534602" max="4603807">33%</progress>

Answer 3

EDIT : aujourd'hui, tous les principaux navigateurs prennent en charge les deux

• <progress>

• input[type='range']

Par conséquent, vous devez utiliser l'un des deux, comme expliqué dans d'autres réponses et cela ne devrait plus être la réponse acceptée.

---

El <input type="range"> est assez récent et vous essayez déjà de le personnaliser avec des CSS :)

Je n'essaierais pas ça pour deux raisons :

1. là il pourrait y avoir d'énormes problèmes de compatibilité maintenant et pour les quelques (ou nombreuses) prochaines années. . Pensez que de nos jours, un contrôle de formulaire comme <select> (disponible depuis le début du web) est encore difficile à personnaliser avec des feuilles de style en cas de changement de navigateur. Par exemple, si vous définissez un padding pour les boîtes de sélection, de nombreux navigateurs (IE7, OPERA9, CHROME5, SAFARI4) ignorent totalement le padding. Cela ne fonctionne que sur IE8 et sur FF 3.6. (tous les tests ont été effectués avec HTML5 DOCTYPE donc en mode standard).

2. El <input type="range"> a été créé pour afficher un curseur PAS une barre de progression Si vous essayez de tricher avec les CSS pour transformer un curseur en barre de progression, cela semble bizarre. Comme essayer d'utiliser le CSS pour transformer un <textarea> dans un tableau, mais pourquoi ne pas simplement utiliser une <table> pour rendre les tableaux !

Pour afficher une barre de progression en HTML5, vous devez suivre la suggestion donnée par marcgg dans sa réponse. Comme aucun navigateur ne le restitue actuellement, vous pouvez utiliser un simple div avec un p à l'intérieur, comme ceci :

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>

Ensuite, il suffit de mettre à jour le style.width de l'intérieur P élément en pourcentage comme :

width: 75%

FYI : si vous voulez faire cela en simple JS voici le code :

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

Answer 4

Vous pouvez dans Webkit, par le biais de l'option -webkit-slider-thumb pseudo-élément : http://jsfiddle.net/leaverou/BNm8j/

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:20px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}

<input type="range" min="0" max="100" />

Bien que les autres aient raison à propos de l'entrée type="range" ne pas être le bon élément pour le travail.

Vous devez utiliser le <progress> et pour les navigateurs qui ne le supportent pas, ce polyfill : http://lea.verou.me/polyfills/progress/

Answer 5

Vous pouvez éditer le CSS de l'entrée de la gamme, en utilisant input[type="range"]::-webkit-slider-thumb y input[type="range"] .

En voici l'exemple,

http://webstutorial.com/range-input-slider-html5-css3/html-5

Je sais qu'on a déjà répondu à cette question, mais je la partage.