Existe-t-il un moyen de styliser le contrôle de plage de HTML5?

Question

Existe-t-il un moyen de styliser le contrôle de plage de HTML5? Est-il possible de changer la couleur de la ligne sur laquelle le curseur glisse?

Answer 1

Il s'avère qu'il y a dans le webkit:

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

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

Vous pouvez ensuite ajouter les attributs dont vous avez besoin à chacun de ces sélecteurs. Fond, dégradé, etc ...

J'espère que cela pourra aider!

Answer 2

Un exemple complet de css pour la personnalisation (en ce moment pour le webkit):

 input[type="range"]{
    background: rgb(94, 30, 30);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -wekkit-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;
    -wekkit-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;
    -wekkit-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;
    -wekkit-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 );
 }
 

Answer 3

Je ne pense pas, mais vous pouvez utiliser ce qui est vraiment sympa.