Wie kann ich markierte Optionsfeldbeschriftungen nur mit CSS gestalten?

Styling von Beschriftungen für markierte Optionsfelder

In CSS ist es möglich, Stile auf Beschriftungen anzuwenden, die mit aktivierten Optionsfeldern verknüpft sind, auch ohne die Verwendung zusätzlicher Elemente wie divs.

The Adjacent Sibling Kombinator

Um sofort auf eine Beschriftung zu zielen, die auf die Eingabe eines aktivierten Optionsfelds folgt, verwenden Sie den CSS-Kombinator für benachbarte Geschwister ( ). Dieser Kombinator gleicht Beschriftungen ab, die an ein bestimmtes Element angrenzen und diesem folgen.

Syntax:

input[type="radio"]:checked + label {
  /* Styles */
}

Beispiel:

Berücksichtigen Sie das folgende HTML-Markup:

<input>

Verwendung des angrenzenden Geschwisters Mit dem Kombinator können Sie die Beschriftung des aktivierten Optionsfelds wie folgt gestalten:

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

Ergebnis:

Nach Auswahl eines Optionsfelds wird die entsprechende Beschriftung fett dargestellt , was den geprüften Zustand anzeigt. Diese Technik kann mit verschiedenen CSS-Eigenschaften verwendet werden, um das Erscheinungsbild von aktivierten Optionsfeldern anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich markierte Optionsfeldbeschriftungen nur mit CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!