web-dev-qa-db-fra.com

Supprimer le contour de la zone de sélection dans FF

Est-il possible de supprimer la ligne en pointillé entourant un élément sélectionné dans un élément sélectionné?

alt text

J'ai essayé d'ajouter la propriété outline en CSS, mais cela n'a pas fonctionné, du moins pas en FF.

<style>
   select { outline:none; }
</style>

Mettre à jour
Avant de commencer et de supprimer le contour, veuillez lire ceci.
http://www.outlinenone.com/

htmlcssfirefoxxhtml
88
Martin

J'ai trouvé une solution, mais c'est la mère de tous les bidouilles, espérons qu'elle servira de point de départ pour d'autres solutions plus robustes. L'inconvénient (trop grand à mon avis) est que tout navigateur qui ne supporte pas text-shadow mais supporte rgba (IE 9) ne rendra pas le texte sauf si vous utilisez une bibliothèque telle que Modernizr (non testée, juste une théorie).

Firefox utilise la couleur du texte pour déterminer la couleur de la bordure en pointillé. Alors dis si tu le fais ...

select {
  color: rgba(0,0,0,0);
}

Firefox rendra la bordure en pointillé transparente. Mais bien sûr, votre texte sera aussi transparent! Nous devons donc en quelque sorte afficher le texte. text-shadow vient à la rescousse:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Nous mettons une ombre de texte sans décalage ni flou, qui remplace le texte. Bien sûr, les navigateurs plus anciens ne comprennent rien à cela. Nous devons donc prévoir une solution de remplacement pour la couleur:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

C'est à ce moment qu'IE9 entre en jeu: il prend en charge rgba mais pas l'ombre de texte; vous obtiendrez ainsi une zone de sélection apparemment vide. Obtenez votre version de Modernizr avec text-shadow détection et faire ...

.no-textshadow select {
  color: #000;
}

Prendre plaisir.

68
methodofaction

Eh bien, réponse de Duopixel est tout à fait parfait. Si nous allons plus loin, nous pouvons le rendre à toute épreuve.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Voilà, valide uniquement pour Firefox et le contour en pointillé moche autour de l’option sélectionnée a disparu.

151
Fleshgrinder

Voici une collaboration de solutions pour résoudre les problèmes de style avec les boîtes de sélection de Firefox. Utilisez ce sélecteur CSS dans le cadre de votre réinitialisation CSS habituelle.

Class supprime les contours selon la question, mais supprime également les images d’arrière-plan (j’utilise habituellement une flèche déroulante personnalisée et la flèche déroulante du système Firefoxes ne peut pas être supprimée pour le moment). Si vous utilisez une image d’arrière-plan pour autre chose que pour une image déroulante, supprimez simplement la ligne background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}
17
Wayne Dunkley

En général, les contrôles de forme sont impossibles à définir avec ce degré de précision. À ma connaissance, aucun navigateur ne prend en charge une gamme sensible de propriétés dans tous les contrôles. C'est la raison pour laquelle il existe un nombre considérable de bibliothèques JavaScript qui "simulent" des contrôles de formulaire avec des images et d'autres éléments HTML et imitent leur fonctionnalité d'origine avec du code:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

10
Álvaro González

Cela ciblera toutes les versions de Firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Vous voudrez peut-être supprimer l'élément! Important si vous prévoyez de faire apparaître le contour sur d'autres pages de votre site qui utilisent la même feuille de style.

6
Kyzer

<select onchange="this.blur();">

Si vous utilisez cette option, la bordure reste en place jusqu'à ce que vous sélectionniez un élément dans la liste.

4
malitta

Essayez l'une de celles-ci:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

référence

1
Catfish

Voici la solution

:focus {outline:none;}
::-moz-focus-inner {border:0;}
0
Faizan

Supprimer le contour/la bordure en pointillé de Firefox Toutes les balises sélectionnables.

Mettez cette ligne de code dans votre feuille de style:

*:focus{outline:none !important;}
0
Hasnain Mehmood