Chromeの青色のフォーカスアウトラインのデフォルトのスタイルは何ですか？

Question

contenteditable divを使用するwebappがあります。私はChromeにどのように表示されるのが好きです：フォーカスすると、Chromeはdivの周りに素晴らしい青色の輝きを表示します。しかし、Firefoxでは私は醜い破線の輪郭を得る。 これまでに私が見たことは、div：focusのアウトラインを変更するとChromeはデフォルトのブルーフレームを表示しなくなることです。 私のアプリを一貫して見栄えの良いものにしたいのですが、私の質問は

div[contenteditable="true"]:focusのChromeのデフォルトスタイルをどのようにして複製できますか？

Answer 1

が質問に答えるために

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

CSSは、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）です。

私はあなたの欲求が一貫していることを理解していますが、ユーザーは通常、1つのブラウザしか使用せず、ブラウザのデフォルトスタイルに慣れています。 :focusのすべてのインスタンスを変更する場合を除き、最終的には矛盾することになります。キーボードユーザー。長所と短所！

あなたがoutlineスタイルを定義し、バック:focusのデフォルトのユーザーエージェントスタイルに '復帰' したい場合は、これは-webkit -prefix色はFF、IEを意味

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

のに役立ちますEdgeは2番目のルールを無視して最初のルールを使用します。 Chrome、Safari、Operaは2番目のルールを使用します。

HTH！

Answer 2

このfiddleは良い近似値を示していますが、具体的なものに近づくために微調整したいかもしれません。

HTML

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