序章
フロントエンドの入力フィールドの内容を検証することになると、以前よりもはるかに簡単になりました。 :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 { ... }
.