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

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

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

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

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

J'ai trouvé une solution, mais elle est mère de tous les hacks, j'espère qu'elle servira de point de départ pour d'autres solutions plus robustes. L'inconvénient (trop gros à mon avis) est que tout navigateur qui ne prend pas en charge text-shadowmais prend en charge rgba(IE 9) ne rendra pas le texte à moins que vous n'utilisiez 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 pointillée. Alors dites si vous le faites ...

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

Firefox rendra la bordure pointillée transparente. Mais bien sûr, votre texte sera également transparent! Nous devons donc en quelque sorte afficher le texte. text-shadowvient à 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 secours 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 rgbamais pas text-shadow, vous obtiendrez donc une boîte de sélection apparemment vide. Obtenez votre version de Modernizr avec text-shadowdétection et faites ...

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

Prendre plaisir.

Eh bien, la réponse de Duopixel est tout simplement 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à, valable uniquement pour Firefox et le triste contour en pointillé autour de l'option sélectionnée a disparu.

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.

La classe supprime le contour selon la question, mais supprime également toute image d'arrière-plan (car j'utilise généralement une flèche déroulante personnalisée et la flèche déroulante du système Firefox ne peut pas être supprimée actuellement). Si vous utilisez l'image d'arrière-plan pour autre chose que l'image déroulante, supprimez simplement la lignebackground-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;
    }
}

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! Important si vous prévoyez d'afficher le plan sur d'autres pages de votre site utilisant la même feuille de style.

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

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

...

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

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

Essayez l'un de ceux-ci:

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 pointillée de Firefox Toutes les balises sélectionnables.

Mettez cette ligne de code dans votre feuille de style:

*:focus{outline:none !important;}   

Ajoutez un style de bordure: aucun à votre sélection dans CSS.

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

travaillant à 100%

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

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

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

if (FIREFOX) {
    //implement the code
}