web-dev-qa-db-ja.com

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

Contenteditable divを使用するwebappがあります。 Chromeでの表示が気に入っています。フォーカスすると、Chromeがdivの周りに素敵な青い光を表示します。ただし、Firefoxでは、dashedい破線のアウトラインが表示されます。これまで私が観察したことは、div：focusのアウトラインを変更すると、Chromeがデフォルトの青いフレームの表示を停止することです。私のアプリを一貫して素敵に見せたいので、私の質問は

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

cssgoogle-chromecontenteditable
25
Barnabas Szabolcs

質問に答えるために、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_でデフォルトのユーザーエージェントスタイルに「戻す」場合、これは役立ちます

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

_-webkit_- prefix色はFF、IEを意味し、Edgeは2番目のルールを無視して最初のルールを使用します。Chrome、SafariおよびOperaは2番目のルール。

HTH！

39
Oli Studholme

この 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;
}
5
SW4

私は完璧なものを見つけたと思う、少なくとも私にとっては：

// Beggin
button {
  outline: 5px auto rgba(0, 150, 255, 1);
  -webkit-outline: 5px auto rgba(0, 150, 255, 1);
  -moz-outline: 5px auto rgba(0, 150, 255, 1);
  -ms-outline: 5px auto rgba(0, 150, 255, 1);
  -o-outline: 5px auto rgba(0, 150, 255, 1);
  /* Use a border to apply the outline */
  border: 1px solid rgba(0, 0, 0, 0);
  
  /* Unimortant styling: */
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
}
<button type="button"">Outline</button>
3
codeWithMe