：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つの重要な変更があります。

1. input:required:valid 必須入力にのみ成功状態を適用します。 技術的には、 optional 入力は常に有効です。
2. input:focus:valid' and 'input:focus:invalid フォーカスされている場合にのみ入力に適用されます。

結果は次のとおりです。

CodePenのalligatorio（ @alligatorio ）によるペンgOrGPxPを参照してください。

---