Comment styler & lt; input type = 'range' / & gt; dans IE10

Je veux le style de la <input type='range' /> élément dans IE10.

Par défaut, c'est à dire 10 style de l'élément comme ceci:
Comment styler & lt; input type = 'range' /& gt; dans IE10

Je tiens à le personnaliser un peu, disons, en changeant la couleur du bleu au rouge, du gris au noir, les petits bars jaune, le petit noir épurateur à blanc. J'ai essayé d'écraser le background-color propriété et le color propriété en CSS. Mais il ne fonctionne pas.

Des idées?

source d'informationauteur louis.luo

  1. 13

    Il y a un certain nombre d'éléments pseudo vous pouvez utiliser le style de la gamme de contrôles dans IE10.

    input[type="range"]::-ms-fill-upper {
    background-color: green;
}

    Sera la couleur de la partie après le pouce. De style avant de la manette utilisation:

     input[type="range"]::-ms-fill-lower {
    background-color: lime green;
}

    Voir, par exemple, http://jsfiddle.net/K8WyC/4/

    Style sur le pouce, vous pouvez utiliser ::-ms-pouce, alors que les marques de graduation peut être décoré avec ::-ms-ticks-before::-ms-ticks-afterou ::-ms-track (les derniers styles des deux côtés). Vous pouvez en savoir plus sur les différents pseudo-éléments pour les contrôles à http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs. 85).aspx

    Les styles vous demandez peut être réalisé comme dans la suite de violon: http://jsfiddle.net/K8WyC/8/

  2. 13

    Vous pouvez utiliser Microsoft CSS pseudo-éléments:

    • ::-ms-remplissage-bas
    • ::-ms-remplissage-haut
    • ::-ms-pouce
    • ::-ms-tiques-avant
    • ::-ms-tiques-après
    • ::-ms-tiques
    • ::-ms-tooltip

    Ici Microsoft pseudo de la liste...

    IE10

    Voici une page avec style IE10 des contrôles de plage
    (Ouvrir avec IE10)

    WebKit

    WebKit shadow DOM

    Autres navigateurs

    Comment le style de la gamme de contrôle pour plusieurs navigateurs

  3. 0

    dans la réponse précédente,

    ::-ms-ticks

    devrait lire

    ::-ms-track

    (qui est l'ordinaire de la piste). La tique couleur est définie par

    ::-ms-track {color:red;}

    La tique hauteur est la hauteur d'une piste, et la largeur ne peut pas être définie. Les tiques sont supprimées, c'est bien connu, avec

     ::-ms-track {color:transparent;}

    Les pseudo-éléments

    ::-ms-ticks-before,
::-ms-ticks-after {
display:block; (or inline-block)
color:red;
height:10px;
}

    créer d'autres tiques au-dessus et au-dessous de la piste. On peut définir leurs couleurs et leurs hauteurs. La tique largeurs ne peut pas être définie. affichage semble nécessaire.

    Internet Explorer depuis la IE10 n'ont par défaut remplissage vertical. Supérieure rembourrage est 17px, remplissage en bas est 32px. Ce qui rend pour une hauteur de curseur par défaut. Donc

    padding:0px;

    peut être appliquée.
    (Voir https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default .)

    (Que je ne peux pas encore de commentaire, je poste comme ça).