Warum formatiert mein CSS die Beschriftung meiner ausgewählten Optionsschaltfläche nicht?

Ausgewählte Optionsfeldbeschriftungen formatieren: Fehlerbehebung

Sie versuchen, die Beschriftung eines ausgewählten Optionsfelds zu formatieren, aber der gewünschte Stil ist nicht vorhanden wird nicht angewendet. Lassen Sie uns den Grund untersuchen und das Problem beheben.

Ihr HTML ist korrekt und das von Ihnen bereitgestellte CSS enthält Regeln für die Gestaltung der Radio-Eingabe und ihrer Beschriftung. Das Problem liegt im Selektor für das aktivierte Optionsfeld:

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

Dieser Selektor zielt auf das Eingabeelement ab, das mit display:none ausgeblendet wird. Wenn Sie ein Optionsfeld aktivieren, wird das aktivierte Attribut zu seiner Eingabe und nicht zu seiner Beschriftung hinzugefügt. Um die Beschriftung zu gestalten, müssen Sie das Beschriftungselement selbst auswählen:

.radio-toolbar label[for]:checked {
    background: pink !important;
}

Hier verwenden wir einen [for]-Attributselektor, um die Beschriftung auszuwählen, die einem aktivierten Optionsfeld zugeordnet ist. Das aktualisierte CSS sollte wie erwartet funktionieren.

Denken Sie daran, auch die Anzeigeeigenschaft für die Beschriftung einzuschließen, um sie sichtbar zu machen:

.radio-toolbar label {
    ...
    display: inline-block;
    ...
}

Das obige ist der detaillierte Inhalt vonWarum formatiert mein CSS die Beschriftung meiner ausgewählten Optionsschaltfläche nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!