Heim >Web-Frontend >CSS-Tutorial >Wie gestalte ich die Beschriftung eines aktivierten Optionsfelds mithilfe von CSS?

Wie gestalte ich die Beschriftung eines aktivierten Optionsfelds mithilfe von CSS?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-15 03:42:19330Durchsuche

How to Style a Checked Radio Button's Label Using CSS?

So gestalten Sie die Beschriftung eines aktivierten Optionsfelds

Das Formatieren der Beschriftung eines aktivierten Optionsfelds mithilfe von CSS kann durch die Verwendung erreicht werden des benachbarten Geschwisterkombinators ( ).

Problem:

Der Versuch, die Beschriftung eines aktivierten Optionsfelds mit dem Selektor „label:checked“ zu formatieren, führt möglicherweise nicht zum gewünschten Ergebnis.

Lösung:

Verwenden Sie den benachbarten Geschwisterkombinator ( ) im CSS Selektor, um auf die Beschriftung abzuzielen, die unmittelbar auf die aktivierte Optionsfeldeingabe folgt.

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

Beispiel-Markup:

<input>

Diese CSS-Regel wendet nur den angegebenen Stil an auf die Beschriftung, die neben einer aktivierten Optionsschaltflächeneingabe liegt. Es ist mit jeder HTML-Struktur kompatibel, bei der die Beschriftung der Eingabe folgt, unabhängig vom Vorhandensein zusätzlicher Elemente.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn