css - Eliminar Firefox brillar en el área de texto enfocada

display sticky css

Question

No puedo entender esto. Estoy tratando de deshacerme de ese brillo azul cuando se resalta textarea en Firefox.

Aquí está mi CSS:

textarea
{
    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;
}

:focus {
      outline:0;
      outline:none;
}

Lo elimina en Safari, pero no tengo suerte con Firefox.

¡Gracias! Mate

Answer 1

Acabo de tener un problema con esto en una entrada de texto: Firefox estaba usando la propiedad de borde para crear el brillo azul en: enfoque, no esquema.

input:focus, textarea:focus {
  outline: none; // for other browsers
  border: none; // only necessary if you haven''t set a border on the element
}

Answer 2

Estoy bastante seguro de que es un comportamiento específico de Mac OS X tema.

Answer 3

La mejor manera de solucionar este problema, en mi opinión, es definir un borde personalizado y un comportamiento de :focus .

textarea {
    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;
    border: none;
}

textarea:focus {
      outline: none;
      border: none;
}

Answer 4

No se puede eliminar el brillo en Firefox, creo. La única forma de hacerlo sería agregar un borde personalizado a su elemento, como el border: 1px black; , eso haría que el cuadro de entrada no tuviera brillo alguno.

Solo los navegadores populares que permiten la etiqueta de outline son Safari y Chrome (no estoy seguro de los navegadores Linux).

Answer 5

Puedes eliminarlo con -moz-appearance:none; , aunque eso puede afectar a toda la apariencia más de lo que estás deseando.

Answer 6

Respuesta poco relacionada pero posiblemente útil: en mi caso, el brillo azul estaba causando un problema de alineación en Firefox solo porque agrega uno o dos píxeles adicionales y cambia el tamaño general del elemento. Supongo que mucha gente llegará a esta pregunta por razones similares y, en lugar de eliminar el brillo azul por completo, la solución a la que llegué fue diseñar el relleno del elemento de entrada específicamente para Firefox:

@-moz-document url-prefix() {
    input:focus {
        padding: 5px!important;
    }
}

Puede cambiar esto para adaptarse a sus necesidades, pero puede ser útil para algunos de ustedes saber acerca de la regla @-moz-document url-prefix() .

Answer 7

Si usas esto en el estilo textarea:

outline:none;

... debería funcionar con todos los navegadores, no solo con Firefox

Answer 8

Simplemente agregue o defina un borde ... por ejemplo, si un borde está definido y he agregado un esquema: ninguno; Para mi CSS, esto hace el truco.

Answer 9

en el # 3

   #Solution0:focus{
      border:solid #CCC 1px;
      outline:1px none transparent;
   }

Al aire libre

Answer 10

qué tal si

*:focus {outline:0px none transparent;}