Wie formatiere ich die Beschriftung eines ausgewählten Optionsfelds in CSS?

So formatieren Sie die Beschriftung eines ausgewählten Optionsfelds in CSS

Optionsfelder stellen ein einzigartiges Interaktionselement in Weboberflächen dar, mit dem Benutzer eines auswählen können Option aus einer Gruppe. Um ihre optische Attraktivität zu verbessern, ist es oft wünschenswert, die mit dem ausgewählten Optionsfeld verknüpfte Beschriftung zu formatieren.

Das Problem:

Beim Versuch sind Sie auf eine Herausforderung gestoßen Wenden Sie mithilfe von CSS Stile auf die Beschriftung eines ausgewählten Optionsfelds an. Ihr aktueller Codeausschnitt enthält Folgendes:

.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

Identifizierung des Problems:

Dieser CSS-Selektor funktioniert nicht, da der benachbarte Geschwisterselektor „ “ nur mit dem übereinstimmt erste Instanz des darauf folgenden Elements. Allerdings befinden sich Ihre Beschriftungen in Ihrem HTML-Code nicht unmittelbar neben den Eingabeelementen.

Die Lösung:

Um die Beschriftung eines ausgewählten Optionsfelds zu formatieren, verwenden Sie die Der CSS-Selektor muss speziell auf das Beschriftungselement abzielen, das der überprüften Eingabe zugeordnet ist. Dies kann mithilfe des Attributs „for“ im Label und des Attributs „id“ im jeweiligen Eingabeelement erreicht werden, wie im folgenden Code gezeigt:

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

.radio-toolbar label {
  display: 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;
}

Durch Anpassen des CSS-Selektors wird der Der Code zielt jetzt korrekt auf die Beschriftungen ausgewählter Optionsfelder ab und wendet den gewünschten Stil an.