https://zenn.dev/yesodco/articles/113ff8b545dc47

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

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

• エラーがテキスト直下に波線で表現されます
• エラーはフォーカスが外れている場合のみ表示されます

面白いですね。

破線表示

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

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

参考: text-decoration-style - CSS: カスケーディングスタイルシート | MDN

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

フォーカスが外れている場合のみエラーを表示

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

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

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

:focus-visible - CSS: カスケーディングスタイルシート | MDNより

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

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