Können CSS-Selektoren auf Eingabewerte abzielen?

Targeting von Eingabewerten mit CSS-Selektoren

Abfrage: Können CSS-Selektoren verwendet werden, um Eingaben basierend auf ihren spezifischen Werten gezielt anzusprechen? Wie kann beispielsweise eine Eingabe mit dem Wert „USA“ isoliert werden?

Antwort:

Konventioneller CSS-Ansatz:

Ja, das ist möglich. CSS-Attributselektoren ermöglichen das Targeting von Eingaben basierend auf ihren Werten. Die folgende Regel zielt auf die Eingabe mit dem Wert „Vereinigte Staaten“ ab:

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

Herausforderungen mit dynamischen Werten:

Der obige Ansatz zielt auf den Attributwert des HTML-Knotens ab. Wenn sich der Wert jedoch dynamisch ändert, gilt die CSS-Regel nicht.

JavaScript-Intervention:

Um Eingabewerte dynamisch anzusprechen, kann JavaScript als Workaround verwendet werden . Eine Methode wird in dieser jsFiddle gezeigt:

<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>

Dieses Skript prüft den Wert der Eingabe und wendet den Stil an, wenn er mit dem gewünschten Wert übereinstimmt.

Abschluss :

CSS-Selektoren bieten eine praktische Möglichkeit, Eingabewerte gezielt auszuwählen. Für statische Werte genügen Attributselektoren. Für dynamische Werte sind jedoch JavaScript-Lösungen erforderlich, um sicherzustellen, dass CSS-Regeln korrekt angewendet werden.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Selektoren auf Eingabewerte abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!