Supprimer le contour de la boîte de sélection dans FF

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

texte alt

J’ai essayé d’append la propriété de outline dans CSS mais cela n’a pas fonctionné, du moins pas dans FF.

  select { outline:none; }  

Mettre à jour
Avant d’aller plus loin et de retirer le contour, veuillez lire ceci.
http://www.outlinenone.com/

J’ai trouvé une solution, mais elle est la mère de tous les hackers. J’espère qu’elle servira de sharepoint départ à d’autres solutions plus robustes. L’inconvénient (trop grand à mon avis) est que tout navigateur ne supportant pas text-shadow mais supportant rgba (IE 9) ne rendra pas le texte à moins d’utiliser 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és. Alors dis si tu le fais …

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

Firefox rendra la bordure en pointillés transparente. Mais bien sûr, votre texte sera transparent aussi! 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 et sans flou, ce qui remplace le texte. Bien sûr, les anciens navigateurs ne comprennent rien à cela, nous devons donc fournir une solution de rechange 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 supporte rgba mais pas text-shadow, vous aurez donc une boîte de sélection apparemment vide. Obtenez votre version de Modernizr avec la détection de l’ text-shadow et faites …

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

Prendre plaisir.

Eh bien, la réponse de Duopixel est parfaite. Si nous allons plus loin, nous pouvons le rendre à l’épreuve des balles.

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

Voilà, seulement valide pour Firefox et le contour pointillé moche autour de l’option sélectionnée est parti.

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

La classe supprime les contours selon la question mais supprime également toute image d’arrière-plan (comme d’habitude, j’utilise une flèche déroulante personnalisée et la flèche déroulante du système Firefox ne peut pas être supprimée). Si vous utilisez une image d’arrière-plan pour autre chose qu’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; } } 

En général, les contrôles de formulaire sont impossibles à définir à ce degré de précision. Je ne connais aucun navigateur prenant en charge une gamme raisonnable de propriétés dans tous les contrôles. C’est la raison pour laquelle il existe des bibliothèques JavaScript qui “simulent” des contrôles de formulaire avec des images et d’autres éléments HTML et émulent leur fonctionnalité d’origine avec du code:

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

Cela ciblera toutes les versions de firefox

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

Vous souhaiterez peut-être supprimer le! Important si vous prévoyez d’afficher le contour sur d’autres pages de votre site qui utilisent la même feuille de style.

Si vous utilisez ceci, la bordure rest jusqu’à ce que vous sélectionniez un élément de la liste.

Essayez l’un de ces:

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

Référence

Voici la solution

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

Supprimer le contour / la bordure en pointillés de Firefox Tous les tags sélectionnables.

Mettez cette ligne de code dans votre feuille de style:

 *:focus{outline:none !important;} 

Cela supprimera le focus de l’élément select et du contour :

 $("select").click(function(){ $(this).blur(); }); 

Bien que cela ne soit pas sans ses inconvénients sur les autres navigateurs. Vous voudrez vérifier le navigateur que l’utilisateur utilise:

 if (FIREFOX) { //implement the code } 
  input[type='range']::-moz-focus-outer { border: 0; outline: none !important; } 

travaillant à 100%