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

動的入力ターゲティング用の CSS 属性セレクター

質問: CSS セレクターを利用して、その属性に基づいて入力をターゲティングできますか具体的な値は？たとえば、値「United States」を持つ入力をターゲットにするにはどうすればよいでしょうか?

答え:

元の解決策: 静的値のみ

はい、CSS 属性セレクターを使用することで可能です。ただし、次のような制限があります。

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

このセレクターは、入力を正確な値「United States」と照合します。値が動的に変更される場合、スタイルは適用されません。

動的値のソリューション

npup の回答に記載されているように、CSS 属性セレクターは、以下に基づいて属性をターゲットにすることはできません。それらの実際の値。この課題に対処するには:

• JavaScript 回避策: 入力値をチェックし、スタイルを動的に適用する JavaScript 関数を作成します。例については、提供されている JSFiddle を参照してください。

動的値ターゲティングの制限

JavaScript は解決策を提供しますが、潜在的なパフォーマンスのボトルネックであることに注意することが重要です。 。また、すべてのブラウザでサポートされているわけではありません。

使用例

動的値ターゲティングは、次のような特定のシナリオで役立ちます。

• 特定の値を含む無効な入力を強調表示します。
• ユーザー インタラクションを特定の入力に制限します。値。

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