Ausgew?hlte Optionsfeldbeschriftungen in CSS formatieren

In diesem Beispiel wollen wir die Beschriftungen ausgew?hlter Optionsfelder formatieren. Allerdings scheint das bereitgestellte CSS nicht wie vorgesehen zu funktionieren. Analysieren wir den HTML- und CSS-Code, um das Problem zu identifizieren.

Der HTML-Code enth?lt ein Div mit der Klasse ?radio-toolbar“, das die Optionsfelder und ihre Beschriftungen enth?lt. Jedes Optionsfeld wird mit display: none; ausgeblendet. Auf die Beschriftungen werden Stile angewendet, einschlie?lich einer Hintergrundfarbe, eines Rahmens und eines Abstands.

Weiter zum CSS: Die erste Regel verbirgt die Optionsfeldeingaben, was richtig ist. Die zweite Regel gestaltet die Beschriftungen selbst. Das Problem liegt in der dritten Regel, die die Beschriftung des ausgew?hlten Optionsfelds formatieren soll.

In der dritten Regel versuchen wir, das Beschriftungselement direkt neben einem aktivierten Optionsfeld auszuw?hlen, indem wir Folgendes verwenden Selektor: .radio-toolbar label input[type="radio"]:checked. Der Selektor stimmt jedoch nur mit dem unmittelbar vorhergehenden Element überein. In diesem Fall wird erwartet, dass die Eingabe des Optionsfelds vor der Beschriftung erfolgt, im HTML-Code steht die Beschriftung jedoch vor der Eingabe.

CSS korrigiert

Wir k?nnen das Problem beheben Verwenden Sie stattdessen das folgende CSS:

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

Durch die ?nderung des Selektors in .radio-toolbar input[type="radio"]:checked label stellen wir sicher, dass die Hintergrundfarbe angewendet wird auf die Beschriftung, die auf die aktivierte Optionsfeldeingabe folgt.

Zus?tzliche ?nderungen für die Funktionalit?t

Abgesehen vom Auswahlproblem k?nnen wir noch ein paar weitere ?nderungen vornehmen, um die Funktionalit?t zu verbessern:

1. Es wird empfohlen, für die Beschriftungen den Inline-Block zu verwenden, um sie richtig auszurichten.
2. Ein for-Attribut auf den Beschriftungen festlegen und entsprechend anpassen id-Attribute auf den Optionsfeldern werden sie korrekt zuordnen.

Hier ist das aktualisierte HTML und CSS:

HTML:

<div class="radio-toolbar">
  <input type="radio">

CSS:

.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;
}

Mit diesen ?nderungen werden die Beschriftungen der Optionsfelder jetzt angezeigt ordnungsgem?? gestaltet und funktional sein und die ausgew?hlte Option durch die rosa Hintergrundfarbe anzeigen.

Das obige ist der detaillierte Inhalt vonWie formatiere ich ausgew?hlte Optionsfeldbeschriftungen in CSS richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!