:required、:optional、:valid、および:invalidを使用したCSSでのフォーム入力のスタイリング
序章
フロントエンドの入力フィールドの内容を検証することになると、以前よりもはるかに簡単になりました。 :required 、:optional 、:valid 、:invalid 疑似クラスを、[非常に視覚的に魅力的な結果を作成するには、X159X]必須またはパターン。 これらの疑似クラスは、 input 、 textarea 、およびselect要素に対して機能します。
疑似クラスを入力する
これは、動作中の疑似クラスの例です。 このHTMLマークアップから始めましょう:
<form action="#"> <input type="text" placeholder="First Name" required> <input type="email" placeholder="Email" required> <input type="text" placeholder="Nickname"> <input type="text" placeholder="Favorite pizza topping"> </form>
そして、次のスタイルを適用しましょう。
input { border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: background-color 0.5s ease-out; } input:optional { border-color: gray; } input:required { border-color: black; } input:invalid { border-color: red; }
結果は次のとおりです。
CodePenのalligatorio( @alligatorio )によるペンvYGeLYwを参照してください。
上記のデモでは、<input type="email"
はHTML5入力タイプであり、ブラウザーに電子メールアドレスを予期するように指示します。 required
属性も使用しているため、最近のブラウザでは、有効な電子メールが入力された場合にのみ入力が:valid
に設定されます。
:focus疑似クラスの追加
フォーカスの状態に応じてスタイリングし、有効性の状態に応じて、入力にフォーカスがある場合にのみ背景画像と色を追加して、さらに面白くしましょう。 同じHTMLマークアップを使用します。
更新されたCSSは次のとおりです。
input { border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: border-color 0.5s ease-out; } input:optional { border-color: gray; } input:required:valid { border-color: green; } input:invalid { border-color: red; } input:required:focus:valid { background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen; background-size: 25px; } input:focus:invalid { background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon; background-size: 25px; }
上記のCSSには2つの重要な変更があります。
input:required:valid
は、必須入力にのみ成功状態を適用します。 技術的には、optional
入力は常に有効です。input:focus:valid' and 'input:focus:invalid
は、フォーカスされている場合にのみ入力に適用されます。
結果は次のとおりです。
CodePenのalligatorio( @alligatorio )によるペンgOrGPxPを参照してください。
代わりに、入力で ::beforeまたは::after を使用してコンテンツを追加したくなるかもしれませんが、残念ながら、入力要素ではそれは不可能です。 1つのトリックは、入力の有効性に応じてコンテンツが追加された兄弟span要素を用意することです。 このようなもの:
input:focus:invalid + span::before { ... }
。