：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 { ... }。