Odpowiednik wytwarzania poświaty w innych przeglądarkach?

Question

Długo używałem tego, aby dodać poświatę do skupionych pól, po raz pierwszy uzyskałem dostęp do mojej strony z Firefoksa i zdałem sobie sprawę, że nie działa na nim, a najprawdopodobniej nie na eksploratorze.

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

Kopia została wklejona z innej strony, więc nie jestem pewien, jak to działa. Jaki jest odpowiednik Firefoksa lub Explorera? Chodzi mi o to, jak zrobić podobny blask w innych przeglądarkach? Dzięki

Answer 1

Webkit traktuje "outline-style: auto;" inaczej niż inne przeglądarki. Jeśli chcesz uzyskać zachowanie, które jest bardziej podobne w różnych przeglądarkach, polecam zamiast tego użyć opcji Box-shadow. Nie dotyczy to starszych przeglądarek (IE8 i wcześniejszych, lub FF3.0 i wcześniejszych), ale poza tym powinno być to samo.

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

byłem w stanie produkować wynik, który pokazuje blask cross-przeglądarki w IE9+, FF4+, Chrome 10+, and Safari 5+.

Opcja 2) Możesz poeksperymentować z użyciem kombinacji konturu (która pojawi się w Webkit) i box-shadow (dla innych przeglądarek).

Opcja 3) Użyj biblioteki takiej jak Formalize CSS, aby zająć się stylem wprowadzania międzyplatformowego. Wyniki są imponujące.