Entspricht das Feldglühen in anderen Browsern?

Question

Ich benutzte dies lange, um fokussierte Felder zu beleuchten. Ich habe zum ersten Mal auf meine Seite von Firefox zugegriffen und festgestellt, dass es nicht darauf funktioniert, und höchstwahrscheinlich auch nicht auf dem Explorer.

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

Ich hatte Kopie eingefügt von einer anderen Seite, so dass ich nicht ganz sicher bin, wie es funktioniert. Was ist das Äquivalent für Firefox oder Explorer? Ich meine, wie mache ich einen ähnlichen Schein in anderen Browsern? Danke

Answer 1

Webkit behandelt "Umriss-Stil: Auto;" anders als andere Browser. Wenn Sie ein Verhalten erzielen möchten, das Browsern ähnlicher ist, sollten Sie stattdessen box-shadow verwenden. Es gilt nicht für ältere Browser (IE8 und früher oder FF3.0 und früher), sollte aber ansonsten identisch sein.

Verwendung 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+ */ 
    } 

konnte ich um ein Ergebnis erzeugen, die in Quer IE9+, FF4+, Chrome 10+, and Safari 5+ glow Browser zeigt.

Option 2) Sie könnten mit einer Kombination von Outline (die in Webkit angezeigt wird) und Box-Shadow (für andere Browser) experimentieren.

Option 3) Verwenden Sie eine Bibliothek wie Formalize CSS, um sich um das plattformübergreifende Eingabe-Styling für Sie zu kümmern. Die Ergebnisse sind ziemlich beeindruckend.