ブログデザイン備忘録～ focus疑似要素いろいろ

　以前に入力要素に対するfocusに関する制御として、Javascriptのイベントハンドラを用いる方法を

atatat.hatenablog.com

で取り上げが、今回はCSSの疑似要素を用いた場合について紹介する。

1. focusに関する疑似要素

　CSSのfocusに関する疑似要素は:focus,:focus-visible,:focus-withinの3種類がある。このうち:focus-withinはform内部のどの要素がフォーカスされても動作するが、:focus,focus-visibleは要素ごとに動作する。 :focus,:focus-visibleはキーボードのタブでフォーカスを動かしたときには動作が同じだが、ボタンクリック時のみ:focus-visibleは動作しない。

2. focus疑似要素の動作例

:focusは動作時に要素背景が黄色、文字色が赤になるようにした。また:focus-visibleはオレンジの破線のアウトラインが表示されるようにしている。

.focus-only:focus {
  background: yellow;
  color: red;
}

.focus-visible:focus-visible {
  outline: 4px dashed darkorange;
}

formのデザインは、フォーカスされたときのバックグラウンドと影(form境界まわり）の動作時間を0.9sに設定し、またフォーカス時にはformの背景色と影がつくように設定している。なお:focus-withinの細かい解説は

CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス

を参照。

form {  
  border: 1px dashed #333;
  padding: 15px;
  transition: background 0.9s ease;
  transition: box-shadow 0.9s ease;
  box-shadow: 0 0 0 1vmax rgba(0, 0, 0, 0);
}
form:focus-within {
    background: #f4d35e;
    box-shadow: 0 0 0 1vmax rgba(0, 0, 0, 0.7);
}