Supprimer les lignes pointillées de la gamme d'entrée de l'élément dans Firefox

Question

Firefox, depuis la version 23, supporte nativement l' <input type="range"> élément, mais je ne pouvais pas comprendre comment faire pour supprimer le contour en pointillé. Le code CSS suivant n'a aucun effet:

input[type='range'], 
input[type='range']:focus, 
input[type='range']:active, 
input[type='range']::-moz-focus-inner, 
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

Quelqu'un aurait-il une idée de comment résoudre ce problème dans Firefox?

Exemple: http://jsfiddle.net/pF37g/

Answer 1

Malheureusement, vous ne pouvez pas!

C'est un bug dans Firefox et il n'y a pas de travail pour corriger cela en plus de la correction à la source de la base elle-même (voir ci-dessous).

Voir aussi Jonathan Watts du blog (qui travaille sur ce sujet):

Problèmes connus:

• la CSS par défaut de style apparence encore besoin de travail, et natif de la thématisation (donnant le curseur de l'apparence du système d'exploitation le thème) est encore à venir ...

Dans une réponse à un commentaire sur son blog à propos de cette même question, il déclare:

Droite maintenant, vous ne pouvez pas désolé. J'ai déposé bug 932410 à faire que possible.

Au moment de l'écriture, il semble y avoir aucun progrès dans ce domaine et on ne sait pas quand un officiel correctif sera disponible.

Mise à jour

Depuis cette réponse a été posté le bogue a été corrigé. Vous pouvez maintenant utiliser (comme indiqué dans d'autres réponses, mais je l'inclus ici par souci d'exhaustivité):

input[type=range]::-moz-focus-outer {
    border: 0;
    }

Answer 2

Il peut être fait avec la nouvelle version de Firefox. Comme indiqué ici, ce bug est corrigé. Donc, il est possible de cacher extérieure de la bordure en pointillé. Pour ce faire, définissez ::-moz-focus-outers'border à 0, comme ceci:

input[type=range]::-moz-focus-outer {
    border: 0;
}

Voici de travail exemple: http://jsfiddle.net/n2dsc/1/

Dans les navigateurs webkit ligne extérieure apparaît si -webkit-appearance: none; est réglé. Pour l'enlever, il suffit de mettre :focuss'contour aucun, comme ceci:

input[type=range]:focus {
    outline: none;
}

Voici de travail exemple: http://jsfiddle.net/8b5Mm/1/

Answer 3

Comme Ken l'a déjà souligné, il n'existe aucun moyen pour supprimer le contour. Cependant, il y a un travail autour de "cacher" le contour si vous connaissez la couleur d'arrière-plan de l'élément parent. En supposant un fond blanc le code CSS suivant serait de masquer le contour en pointillé:

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

Mise à jour de votre exemple: http://jsfiddle.net/9fVdd/15/

Answer 4

Si vous pouvez vous contenter d'un élément d'habillage (il est probable que vous avez déjà un habillage LI ou P), vous pouvez utiliser FireFox uniquement CSS pour positionner l'entrée hors de la vue et de repositionner la piste/pouce dans la vue.

<span class="range-wrap"><input type="range" /></span>

.range-wrap {
    overflow: hidden;
}
input[type='range'] {
    -moz-transform: translateY(-10em);
}
input[type='range']::-moz-range-track {
    -moz-transform: translateY(10em)
}
input[type='range']::-moz-range-thumb {
    -moz-transform: translateY(10em);
}

http://jsfiddle.net/pF37g/98/

Answer 5

Contour en pointillé n'est pas un problème, c'est le navigateur de la façon de montrer l'élément d'entrée est sélectionnée. Ce que vous pouvez faire est de mettre tabIndex -1 qui empêche input élément à partir de la prise de focus sur l'onglet et, par conséquent, d'avoir le contour:

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

Mais après avoir fait cela, vous perdrez une partie de l'accessibilité du clavier. Il vaut mieux avoir l' input élément accessibles au clavier.

Voici le violon: http://jsfiddle.net/pF37g/14/