html - mdn - mozilla css

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?

Intenté agregar la propiedad del outline en CSS, pero no funcionó, al menos no en FF.

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

Actualizar
Antes de continuar y eliminar el esquema, lea esto.
http://www.outlinenone.com/

Answer 1

¡Aquí, esto funcionará!

$ ("seleccionar"). haga clic en (función () {

// esto elimina el foco del elemento seleccionado de inmediato

// y también lo hará el esquema

$ (esto) .blur ();

});

Aunque no tiene fallas en otros navegadores, querrá verificar el tipo de navegador que utiliza el usuario y si (la prueba es FIREFOX) {// implementar el código}

Answer 2

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.

Class elimina el esquema 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 utiliza la imagen de fondo para cualquier otra cosa que no sea la imagen desplegable, simplemente elimine 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 3

Aquí viene la solución

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

Answer 4

Bueno, la respuesta de Duopixel es completamente perfecta. Si vamos un paso más allá podemos hacerlo a prueba de balas.

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

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

Answer 5

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

Pon esta línea de código en tu hoja de estilo:

*:focus{outline:none !important;}

Answer 6

En general, los controles de forma 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 que hay un montón de bibliotecas de JavaScript que "falsifican" controles de formulario con imágenes y otros elementos HTML y emulan su funcionalidad original con código:

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

...

Answer 7

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 admita text-shadow pero soporte 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 di si lo haces ...

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 compensación y sin borrosidad, por lo que reemplaza el texto. Por supuesto, el navegador más antiguo no entiende nada de esto, por lo que debemos proporcionar una alternativa para el color:

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

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

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

Disfrutar.

Answer 8

Esto apuntará 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 eliminar la información importante, si planea que el esquema aparezca en otras páginas de su sitio que usen la misma hoja de estilo.

Answer 9

Pruebe uno de estos:

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

Reference

Answer 10

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

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

Answer 11

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

trabajando al 100%