Wie kann ich ausgewählte Optionsfeldbeschriftungen in CSS formatieren?

Ausgewählte Optionsfeldbeschriftungen formatieren

In CSS ist es beim Formatieren einer ausgewählten Optionsfeldbeschriftung wichtig, die richtige Ausrichtung und Spezifität sicherzustellen. Um dies zu erreichen, befolgen Sie diese Schritte:

1. Eingabeelement ausblenden:
Anzeige verwenden: keine; um das Eingaberadioelement auszublenden. Dies hilft, sich auf das zugehörige Etikett zu konzentrieren.

2. Stiletikett:
Definieren Sie den Stil für das Etikett, einschließlich Hintergrundfarbe, Rahmen und Polsterung. Verwenden Sie den Inline-Block, damit Etiketten nebeneinander platziert werden können.

3. Auf markierte Optionsfelder abzielen:
Um die Beschriftung eines ausgewählten Optionsfelds zu gestalten, verwenden Sie die Pseudoklasse :checked, um auf die angrenzende Beschriftung abzuzielen:

.radio-toolbar input[type="radio"]:checked + label {
  /* Styling for selected labels */
}

Beispiel:

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
  background-color: #bbb;
}

Indem Sie diese Schritte befolgen, können Sie die Beschriftungen ausgewählter Optionsfelder effektiv gestalten und so sicherstellen, dass sie hervorstechen und den Benutzer ansprechen Erfahrung.