❌

CSSだけで、ちょっといい感じのフォームエラー表示

2022/04/14に公開

腹筋やってますか？　やっている側のデザイナーである@8845musignです。@argyleinkさんが面白いCSSのTipsをツイートしていたため、備忘録を残しておきます。

CodePenのサンプルへ表示されているフォームに、間違った形式のメールアドレスを入力してください。その後フォーカスを外してみると……？

動画: メールアドレスを入力すべきinput要素へ「hogehoge」と入力し、フォーカスを外すと赤い波線が文字の下へ表示

面白いですね。

破線表示

文字の下線にはよくあるストレートな罫線だけでなく、さまざまな形を当てはめられます。形を表すtext-decoration-styleにはsolid、double、dotted、dashedおよびwavyを指定できます。Tipsではwavyを使っています。

/* text-decoration-line、text-decoration-colorおよびtext-decoration-styleを一括指定している */
text-decoration: underline wavy red;

波線はかわいいですね。テストの答案に赤ペンで書かれた記憶があります。

フォームのバリデーションエラーは便利な反面、常に表示されていると鬱陶しく感じる場面があります。このTipsでは入力中はエラーを表示しないことで、煩わしさを軽減しています。正しい値を設定するために入力しているわけですから、操作中にエラーは必要ないですよね。

:focus-visible擬似クラスを使用することで、エラーの表示タイミングを操作しています。

:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。

コードでの該当箇所は次の箇所です。

input:not(:focus-visible):invalid {
  text-decoration: underline wavy red;
}

セレクタを見ると「フォーカスを明示するべきではないかつ値に誤りがある」場合に下線を表示するようになっています。やや複雑なセレクタですが、特定の状況下を表現できる高い表現力を有しています。

このエラー表示がベストプラクティスになるかはわかりませんが、ひとつのテクニックとして覚えておいても損はないでしょう。CSSだけでもかなりの表現ができます。波線はどこかで使いたいなぁ。