フォーカスの「黒枠」の色を変更するには / 新しいのが良いか悪いか

フォーカスカラー 

 前ページで採り上げましたが、Chromeのフォーカス枠やフォーム要素のデザインが刷新されました。 身近なところでは、アメブロの「いいね」ボタンが一番目立ちますが「コメント」ボタンも、フォーカスが当たると「黒枠」が表示されます。

パーツのデザインで、フォーカス枠の指定をブラウザのデフォルトから変更している場所では「黒枠」は表示されません。 そのため、ブログページ上ではこれ位の様ですが、他の管理ページなどでは、時々「黒枠」が顔を出します。

このフォーカス枠（フォーカスリング）について、少し調べて見ました。 ここでは、「いいね」ボタンを例にしていますが、他の場所でも適用できる内容と思います。

「フォーカスリング」は特別な描画 

以下が問題の「黒枠」です。

「黒枠」を表示するコードを探すと、「いいね」ボタンに関連するCSSを調べても、この「黒」を指定する色コードはどこにも出て来ません。 どうやら、これは隠してあるらしく、以下のコードだけで「フォーカス枠」が指定されている様です。

:focus {
    outline: -webkit-focus-ring-color auto 1px; }

この指定は「user agent stylesheet」と表示されています。 この指定をCCSでオーバーライドするために、最初に以下の「outline」の一般的な指定をしてみました。

:focus {
    outline: 1px solid #2196f3; }

これで「黒枠」ではなくなったのですが、何か違います。 拡大してみると、ボタンの外側に枠線が描画されているのと、角の丸みがありません。

「outline」の描画は「border-radius」の様な角を丸めたデザインには出来ません。しかし「-webkit-focus-ring」の指定は「outline」のプロパティなのに角が丸く、特殊な描画機能が働いています。

こちらで描いた「outline」は負の「outline-offset」指定で、内側に描画できます。

:focus {
    outline: 1px solid #2196f3;
    outline-offset: -1px; }

角の丸みが必要なければ、これでOKですね。 枠線の色は好みのカラーコードを指定できます。

「focus-ring」を生かす 「outline-color」

上の指定は「focus-ring」の機能を封じて、別個に「outline」を指定したことになります。 しかし「outline-color」の指定をすれば、「focus-ring」の特殊な描画を維持しながら「線色」だけ変更ができました。

:focus {
    outline-color: #2196f3; }

ちゃんと角が丸まっています。 角の丸いフォーカス枠が必要で、簡単にすませたい時は「outline-color」を指定する手が使えそうです。

色々と試しましたが、「focus-ring」の特性を維持する指定は「outline-color」以外になく、他のプロパティを指定すると、みんな普通の「outline」の描画に変ります。

「focus-ring」のコードは意図的に「outline-color」の指定だけ変更できる様にしているのかも知れません。

「:focus」だけの指定は注意が要ります 

「いいね」ボタンは「button」要素ですが、新しいフォーカス枠線は「input」や「textarea」等には、少し違う指定になっている様です。 以下はその「user agent stylesheet」の指定を拾ったものです。

input:focus {
    outline-offset: -2px; }

textarea:focus {
    outline-offset: -2px; }

これから考えると、他の要素のアレンジにはコードの調整が必要かも知れません。 このページの説明は「:focus {}」のセレクタ表記を使っていますが、これはページ上のすべての要素のフォーカス時に適用され、そのまま実際に指定すると、他の要素に不適当な場合が考えられます。

つまり、新しいフォーカス枠のアレンジコードには、「input[type="text"]:focus」といった、対象要素ごとの厳密なセレクタ指定の考慮が必要と思います。 本気になって「黒枠」対策をすると、けっこう大変かも知れません。