Supprimer le contour de sélectionner la zone dans FF

Question

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

J'ai essayé d'ajouter l' outline de la propriété en CSS mais il ne fonctionne pas, du moins pas dans FF.

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

Answer 1

Eh bien, Duopixel la réponse est simple parfait. Si nous allons plus loin, nous pouvons le faire à l'épreuve des balles.

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

Là vous allez, valable uniquement pour Firefox et le truand contour en pointillé autour de l'option sélectionnée est allé.

Answer 2

J'ai trouvé une solution, mais c'est la mère de tous les hacks, nous espérons qu'il servira de point de départ pour d'autres plus robuste de solutions. Le revers de la médaille (trop grand à mon avis) c'est que n'importe quel navigateur qui ne prend pas en charge text-shadow mais supporte rgba (IE 9) de ne pas rendre le texte moins d'utiliser une bibliothèque comme Modernizr (pas testé, juste une théorie).

Firefox utilise la couleur du texte pour déterminer la couleur de la bordure en pointillé. Donc dire que si vous ne...

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

Firefox rendu de la bordure en pointillé transparent. Mais bien sûr, votre texte sera transparent! Nous devons donc en quelque sorte l'affichage du texte. text-shadow vient à la rescousse:

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

Nous avons mis un texte de l'ombre à pas décalés et pas de flou, de sorte que remplace le texte. Bien sûr, ancien navigateur de ne pas comprendre quoi que ce soit, nous devons donc fournir une solution de repli pour la couleur:

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

C'est quand IE9 entre en jeu: il supporte rgba mais pas de texte de l'ombre, de sorte que vous obtiendrez un apparemment vide de la boîte de sélection. Obtenez votre version de Modernizr avec text-shadow de détection et de faire...

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

Profitez de.

Answer 3

Voici une collaboration de solutions pour résoudre le style des problèmes avec Firefox, sélectionnez les cases. Utilisez ce sélecteur CSS comme une partie de votre habitude CSS reset.

Classe supprime les grandes lignes par question, mais supprime également toute image d'arrière-plan (comme j'ai l'habitude d'utiliser un custom flèche de menu déroulant et Firefox système de flèche de menu déroulant ne peuvent pas être supprimés). Si l'utilisation de l'image de fond pour autre chose que la liste déroulante de l'image, il suffit de supprimer 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;
    }
}

Answer 4

En général, les contrôles de formulaire sont impossibles à coiffer à ce degré de précision. Il n'y a pas de navigateur, je suis conscient de qui prend en charge un bon éventail de propriétés dans tous les contrôles. C'est la raison pour laquelle il y a une foule de bibliothèques JavaScript qui "faux" contrôles de formulaire avec des images et d'autres éléments HTML et imiter leur fonctionnalité d'origine avec le code:

http://www.webstuffshare.com/2010/03/stylize-your-own-checkboxes/

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

http://lipidity.com/fancy-form/

...

Answer 5

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

Si vous utilisez cette la frontière demeure jusqu'à ce que vous sélectionnez un élément dans la liste.