Wie kann ich die Beschriftung eines aktivierten Optionsfelds mit CSS gestalten?

CSS-Selektor zum Hervorheben der Beschriftung eines aktivierten Optionsfelds

Frage: Kann CSS verwendet werden, um die Beschriftung eines aktivierten Optionsfelds zu gestalten?

Erklärung:

Das angegebene HTML-Markup enthält einen Eingabetyp „Radio“ mit einer zugehörigen Bezeichnung. Es gibt einen erfolglosen Versuch, die Beschriftung des aktivierten Optionsfelds mit „label:checked {font-weight:bold;}“ fett darzustellen.

Lösung:

An Um das Problem zu beheben, kann ein geeigneter CSS-Selektor verwendet werden:

input[type="radio"]:checked+label { font-weight: bold; }

Dieser Selektor verwendet das Angrenzende Geschwister Kombinator ( ) um anzugeben, dass das Beschriftungselement unmittelbar auf die aktivierte Optionsfeldeingabe folgen soll.

So funktioniert es:

Wenn ein Optionsfeld mit dem angegebenen id überprüft wird, sorgt der „ “-Selektor dafür, dass die Beschriftung mit dem entsprechenden „for“-Attribut ausgewählt und fett dargestellt wird. Diese Methode stellt sicher, dass das Etikett unabhängig vom umgebenden Markup oder zusätzlichen Elementen gestaltet wird.

Beispiel:

<input>

input[type="radio"]:checked+label { font-weight: bold; }

Hinweis: Bei dieser Lösung wird davon ausgegangen, dass die angegebenen Browser die CSS3-Funktionalität unterstützen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Beschriftung eines aktivierten Optionsfelds mit CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!