Wie formatiere ich ausgewählte Optionsfeldbeschriftungen in CSS richtig?

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!