Tương đương với việc tạo ra ánh sáng trường trong các trình duyệt khác?

Question

Tôi đã sử dụng điều này để thêm ánh sáng vào các trường tập trung, tôi đã truy cập trang của mình từ Firefox lần đầu tiên và nhận ra nó không hoạt động trên đó, và rất có thể không phải trên trình khám phá.

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

Tôi đã sao chép xong từ trang khác vì vậy tôi không chắc nó hoạt động như thế nào. Tương đương với Firefox hoặc Explorer là gì? Tôi có nghĩa là làm thế nào để làm cho một ánh sáng tương tự trong các trình duyệt khác? Cảm ơn

Answer 1

Webkit xử lý "kiểu đường viền: tự động;" khác với các trình duyệt khác. Nếu bạn muốn nhận được hành vi tương tự hơn trên các trình duyệt, tôi khuyên bạn nên sử dụng hộp bóng thay thế. Nó sẽ không áp dụng cho các trình duyệt cũ hơn (IE8 và trước đó, hoặc FF3.0 và trước đó) nhưng nếu không sẽ giống nhau.

Sử dụng 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+ */ 
    } 

tôi đã có thể tạo ra một kết quả cho thấy ánh sáng rực rỡ qua trình duyệt trong IE9+, FF4+, Chrome 10+, and Safari 5+.

Tùy chọn 2) Bạn có thể thử nghiệm bằng cách sử dụng một số kết hợp đường viền (sẽ hiển thị trong Webkit) và hộp bóng (đối với các trình duyệt khác).

Tùy chọn 3) Sử dụng thư viện như Formalize CSS để quản lý kiểu nhập liệu đa nền tảng cho bạn. Kết quả khá ấn tượng.