¿Equivalente para producir brillo de campo en otros navegadores?

Question

Estuve mucho tiempo usando esto para agregar un brillo a los campos enfocados, accedí a mi página desde Firefox por primera vez y me di cuenta de que no funciona en ella, y muy probablemente tampoco en el explorador.

border: 1px solid #E68D29; 
outline-color: -webkit-focus-ring-color; 
outline-offset: -2px; 
outline-style: auto; 
outline-width: 5px; 

I have copy lo pegó de otra página, así que no estoy muy seguro de cómo funciona. ¿Cuál es el equivalente de Firefox o Explorer? Quiero decir, ¿cómo hago un brillo similar en otros navegadores? Gracias

Answer 1

Webkit trata "outline-style: auto;" de forma diferente a otros navegadores. Si desea obtener un comportamiento que sea más similar en todos los navegadores, le recomiendo que use box-shadow en su lugar. No se aplicará a los navegadores más antiguos (IE8 y anteriores, o FF3.0 y anteriores), sino que deberían ser los mismos.

Usando this code

input { 
    border: 1px solid #E68D29; 
    } 
    input.focus { 
    border-color: #439ADC; 
    box-shadow: 0 0 5px #439ADC; /* IE9, Chrome 10+, FF4.0+, Opera 10.9+ */ 
    -webkit-box-shadow: 0 0 5px #439ADC; /* Saf3.0+, Chrome */ 
    -moz-box-shadow: 0 0 5px #439ADC; /* FF3.5+ */ 
    } 

I fue capaz de producir un resultado que muestra resplandor cross-browser en IE9+, FF4+, Chrome 10+, and Safari 5+.

Opción 2) Puede experimentar con el uso de alguna combinación de esquema (que se mostrará en Webkit) y sombra de cuadro (para otros navegadores).

Opción 3) Utilice una biblioteca como Formalize CSS para ocuparse del estilo de entrada multiplataforma para usted. Los resultados son bastante impresionantes.