Eliminar el contorno del cuadro de selección en FF

Question

¿Es posible eliminar la línea punteada que rodea un elemento seleccionado en un elemento seleccionado?

He intentado añadir la propiedad outline en CSS, pero no funcionó, al menos no en FF.

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

actualización
Antes de seguir adelante y quitar el contorno, por favor leer esto.
http://www.outlinenone.com/

Answer 1

Encontré una solución, pero es la madre de todos los hacks, con suerte servirá como punto de partida para otras soluciones más robustas. La desventaja (demasiado grande en mi opinión) es que cualquier navegador que no admite text-shadow pero admite rgba (IE 9) no procesará el texto a menos que use una biblioteca como Modernizr (no probada, solo una teoría).

Firefox usa el color del texto para determinar el color del borde punteado. Entonces diga si lo hace ...

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

Firefox hará que el borde punteado sea transparente. ¡Pero por supuesto tu texto también será transparente! Entonces, de alguna manera debemos mostrar el texto. text-shadow viene al rescate:

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

ponemos una sombra de texto sin offset y ninguna falta de definición, por lo que sustituye el texto. Por supuesto navegador más antiguo no entiendo nada de esto, por lo que debe proporcionar una reserva para el color:

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

Esto es cuando entra en juego IE9: apoya rgba pero no sombra de texto, por lo que obtendrá un cuadro de selección aparentemente vacío. Obtenga su versión de Modernizr con text-shadow detección y hacer ...

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

disfrutar.

Answer 2

En general, los controles de formulario son imposibles de configurar con ese grado de precisión. No conozco ningún navegador que admita un rango razonable de propiedades en todos los controles. Esa es la razón por la cual hay un tropecientos JavaScript bibliotecas que "falsos" los controles de formulario con imágenes y otros elementos HTML y emular su funcionalidad original con código:

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

...

Answer 3

Pruebe uno de éstos:

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

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

Reference

Answer 4

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

Si usa esto, el borde se mantendrá hasta que seleccione un elemento de la lista.

Answer 5

Bueno, Duopixel’s answer es perfecto. Si damos un paso más, podemos hacerlo a prueba de balas.

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

Ahí va, solo es válido para Firefox y el feo contorno punteado alrededor de la opción seleccionada ha desaparecido.

Answer 6

Aquí viene la solución

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

Answer 7

Esto se dirigirá a todas las versiones de Firefox

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

Es posible que desee quitar el! Importante, si usted planea tener el contorno aparecer en otras páginas de su sitio que usa la misma hoja de estilo.

Answer 8

Aquí hay una colaboración de soluciones para solucionar problemas de estilo con cuadros de selección de Firefox. Utilice este selector de CSS como parte de su restablecimiento CSS habitual.

La clase elimina el contorno según la pregunta pero también elimina cualquier imagen de fondo (ya que generalmente utilizo una flecha desplegable personalizada y la flecha desplegable del sistema Firefoxes no se puede eliminar actualmente). Si la imagen de fondo utilizando para otra imagen desplegable que nada, basta con quitar la línea 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 9

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

funcionando al 100%

Answer 10

Aquí, esto va a funcionar!

$ ("SELECT"). Haga clic en (function() {

// Esto elimina el foco del elemento select inmediatamente

// y también lo hará el contorno

$ (this) .blur();

}); 

Aunque esto no tiene sus idas corto en otros navegadores, tendrá que comprobar el tipo de navegador que el usuario está haciendo uso de y si (prueba es Firefox) {//implementar t El código}

Answer 11

Eliminar el contorno/el borde punteado de Firefox Todas las etiquetas seleccionables.

Ponga esta línea de código en la hoja de estilo: hace

*:focus{outline:none !important;}