:enabled 擬似クラス セレクターを使用して、利用可能なフォーム要素のスタイルを変更します。

使用可能なフォーム要素のスタイルを変更するには、:enabled 疑似クラス セレクターを使用します。特定のコード例が必要です。

Web 開発では、フォーム要素は不可欠な部分です。フォームをデザインするとき、ユーザー エクスペリエンスを向上させるために、ステータスに基づいてフォーム要素のスタイルを変更する必要があることがよくあります。この点に関して、CSS 疑似クラス セレクターは優れた解決策を提供してくれます。一般的に使用される疑似クラス セレクターの 1 つは次のとおりです。

:有効な擬似クラス セレクターは、利用可能なフォーム要素を選択するために使用されます。これらの要素に特定のスタイルを設定することで、利用可能なフォーム要素と利用できないフォーム要素を区別できるため、よりフレンドリーで直感的なユーザー インターフェイスが提供されます。

ここでは、:enabled 擬似クラス セレクターを使用して利用可能なフォーム要素のスタイルを変更する方法を示す具体的なコード例をいくつか示します。まず、いくつかの基本スタイルを設定してフォーム要素をレンダリングできます。

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
}

select {
  width: 200px;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

次に、:enabled 疑似クラス セレクターを使用して、利用可能なフォーム要素と利用できないフォーム要素を区別し、異なるスタイルを設定します。例:

input:enabled, select:enabled, textarea:enabled {
  background-color: white;
  color: black;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: #f9f9f9;
  color: #aaa;
}

上記のコードにより、使用可能なフォーム要素の背景色は白、フォントの色は黒に設定されますが、使用できないフォーム要素の背景色はグレーに設定され、フォントの色はライトグレーに設定します。こうすることで、ユーザーはフォームに記入するときに、使用可能なフォーム要素と使用できないフォーム要素を明確に区別できます。

さらに、:enabled 擬似クラス セレクターを使用して、境界線の色の変更、フォント サイズの調整など、使用可能なフォーム要素の他のスタイルを設定することもできます。例:

input:enabled {
  border-color: #4CAF50;
}

select:enabled {
  outline: 2px solid #4CAF50;
  font-size: 16px;
}

textarea:enabled {
  border-color: #4CAF50;
  font-family: Arial, sans-serif;
}

上記のコードにより、使用可能なテキスト入力ボックスに緑色の境界線を設定し、使用可能なドロップダウン メニューに緑色の外側の境界線を設定し、フォント サイズを調整して、使用可能なテキスト入力ボックスを設定します。複数行テキスト ボックスは緑色の境界線の色とフォント スタイルで設定されます。

つまり、:enabled 擬似クラス セレクターを使用すると、利用可能なフォーム要素と利用できないフォーム要素を区別するのに役立ち、それにより、より直観的でフレンドリーなユーザー インターフェイスが提供されます。さまざまなスタイルを設定することで、どのフォーム要素がデータを入力でき、どのフォーム要素が使用できないかをユーザーに明確に知らせることができます。フォーム要素のスタイルを変更するこの方法により、ユーザーがフォームに入力する効率とエクスペリエンスが大幅に向上します。この記事が、:enabled 擬似クラス セレクターの理解と適用に役立つことを願っています。

以上が:enabled 擬似クラス セレクターを使用して、利用可能なフォーム要素のスタイルを変更します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。