Phong cách mặc định của đường viền tiêu điểm màu xanh trong Chrome là gì?

Question

Tôi có một ứng dụng web sử dụng div có thể chỉnh sửa nội dung. Tôi thích cách chúng xuất hiện trong Chrome: khi tôi tập trung, Chrome sẽ hiển thị một ánh sáng màu xanh đẹp xung quanh div. Tuy nhiên trong Firefox tôi nhận được một phác thảo xấu xí tiêu tan. Những gì tôi quan sát được cho đến nay là Chrome ngừng hiển thị khung màu xanh mặc định của nó khi tôi thay đổi các phác thảo của div: tập trung. Tôi muốn làm cho ứng dụng của mình trông đẹp mắt, do đó, câu hỏi của tôi là

làm cách nào để sao chép kiểu mặc định của Chrome cho div[contenteditable="true"]:focus?

Answer 1

Để trả lời câu hỏi, các trình duyệt Webkit sử dụng outline: 5px auto -webkit-focus-ring-color;. Trên máy Mac -webkit-focus-ring-color có màu xanh da trời rgb(94, 158, 214) (hoặc #5E9ED6), nhưng trên Windows và Linux là vàng rgb(229, 151, 0) (hoặc #E59700) (ref).

Trong khi tôi hiểu mong muốn của bạn cho phù hợp, người dùng thường chỉ sử dụng một trình duyệt, và được sử dụng để kiểu mặc định của trình duyệt của họ. Lưu ý rằng trừ khi bạn dự định thay đổi mọi trường hợp của :focus, bạn sẽ kết thúc với sự không thống nhất, ví dụ: người dùng bàn phím. Ưu và nhược điểm eh!

Nếu bạn xác định outline phong cách và muốn 'Hoàn nguyên' trở lại mặc định User Agent phong cách trên :focus, điều này sẽ giúp

.myClass:focus { 
 
    outline: 1px dotted #212121; 
 
    outline: 5px auto -webkit-focus-ring-color; 
 
}

Màu -prefix -webkit nghĩa FF, IE và Edge sẽ bỏ qua quy tắc thứ hai và sử dụng quy tắc đầu tiên. Chrome, Safari và Opera sẽ sử dụng quy tắc thứ hai.

HTH!

Answer 2

Điều này fiddle cho phép tính gần đúng tốt, bạn có thể muốn tinh chỉnh để đến gần hơn với những gì bạn cụ thể sau đó.

HTML

<div contenteditable='true'>Edit Me</div> 

CSS

div[contenteditable=true] { 
    width:200px; 
    border:2px solid #dadada; 
    border-radius:7px; 
    font-size:20px; 
    padding:5px; 
    margin:10px;  
} 

div[contenteditable=true]:focus { 
    outline:none; 
    border-color:#9ecaed; 
    box-shadow:0 0 10px #9ecaed; 
}