什麼是Chrome中藍色焦點輪廓的默認樣式？

我有一個使用contenteditable div的web應用程序。我喜歡它們在Chrome中的顯示方式：當我專注時，Chrome顯示圍繞div的藍色光芒。然而在Firefox中，我得到了一個醜陋的虛線輪廓。到目前爲止，我觀察到的是，一旦我更改div：focus的輪廓，Chrome會停止顯示其默認藍色框架。我想讓我的應用一直很好看，所以我的問題是什麼是Chrome中藍色焦點輪廓的默認樣式？

我該如何複製Chrome的默認樣式爲div[contenteditable="true"]:focus？

來源

2013-12-16 Barnabas Szabolcs

知道如何找到它更有幫助：在devtools中，force：focus狀態在div上，並且看到樣式 – caub

要回答這個問題，Webkit的瀏覽器使用outline: 5px auto -webkit-focus-ring-color;。在Mac上，-webkit-focus-ring-color爲藍色rgb(94, 158, 214)（或#5E9ED6），但在Windows和Linux上爲黃金rgb(229, 151, 0)（或#E59700）（ref）。

雖然我理解您對一致性的渴望，但用戶通常只使用一個瀏覽器，並習慣於瀏覽器的默認樣式。請注意，除非您計劃更改:focus的每個實例，否則最終的結果不一致。鍵盤用戶。優點和缺點呃！

如果定義outline風格，並希望 '恢復' 回上:focus默認的用戶代理的風格，這將有助於

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

的-webkit -prefix顏色意味着FF，IE Edge會忽略第二條規則並使用第一條規則。 Chrome，Safari和Opera將使用第二條規則。

HTH！

來源

2016-07-21 08:09:50

這個fiddle給出了一個很好的近似值，你可能想調整一下，以便更接近你明確的後面。

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; 
}

來源

2013-12-16 11:15:07 SW4

謝謝，這看起來很棒！我仍然保留這個問題，因爲這需要四捨五入的邊界並且不保留原始邊界。 –

@Barnabas Szabolcs只是刪除邊框的造型... – SW4

最簡單的事情就是使用上面的'div [contenteditable = true]：focus'類。儘管只有原始元素具有指定的邊界，否則它將無法更改。 – SW4

什麼是Chrome中藍色焦點輪廓的默認樣式？

回答

相關問題