CSS セレクターは入力値をターゲットにできますか?

CSS セレクターを使用した入力値のターゲット

クエリ: CSS セレクターを使用して、特定の値に基づいて入力をターゲットにすることができますか?たとえば、値「United States」を持つ入力はどのように分離できますか?

答え:

従来の CSS アプローチ:

はい、可能です。 CSS 属性セレクターを使用すると、その値に基づいて入力をターゲティングできます。次のルールは、値「United States」を持つ入力をターゲットとします:

<code class="css">input[value="United States"] { color: #F90; }</code>

動的値を持つチャレンジ:

上記のアプローチは、HTML ノードの属性値をターゲットとします。ただし、値が動的に変更される場合、CSS ルールは適用されません。

JavaScript 介入:

入力値を動的にターゲットにするために、回避策として JavaScript を利用できます。 。この jsFiddle には 1 つのメソッドが示されています:

<code class="html"><input type="text" id="country" value="United States"></code>

<code class="javascript">var countryInput = document.getElementById('country');
if (countryInput.value === 'United States') {
  countryInput.style.color = '#F90';
}</code>

このスクリプトは入力の値をチェックし、目的の値と一致する場合にスタイルを適用します。

結論:

CSS セレクターは、入力値をターゲットにする便利な方法を提供します。静的な値の場合は、属性セレクターで十分です。ただし、動的な値の場合、CSS ルールが正しく適用されるようにするために JavaScript ソリューションが必要になります。

以上がCSS セレクターは入力値をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。