Ich habe folgendes HTML:
%Vor% Mit CSS habe ich dem <label> -Tag eine Hintergrundfarbe hinzugefügt.
Ich möchte jetzt die Hintergrundfarbe des Etiketts ändern, wenn das Kontrollkästchen aktiviert ist. Ich weiß, wie man es mit Javascript macht, aber gibt es einen Weg, es nur mit CSS zu benutzen?
Ich habe einige Lösungen gesehen, aber sie verwenden den benachbarten Geschwisterselektor und funktionieren nur, wenn das Label nach dem Kontrollkästchen erscheint.
Ich hoffe immer noch, dies ohne JavaScript zu beheben, hat jemand eine Ahnung?
UPDATE:
Wie ich befürchtet habe, kann es auf diese Weise nicht gemacht werden, also muss ich es mit JS machen oder denselben visuellen Effekt mit einer anderen HTML-Struktur erreichen. Ich möchte die Hintergrundfarbe des Etiketts und des Textfelds auf einmal einstellen, damit ich eine Lösung wählen kann, bei der das Kontrollkästchen absolut über dem Etikett platziert wird. Guter Punkt PlantTheldea!
Oder ich kann die Hintergrundfarbe auf das Label und das Kontrollkästchen anwenden.
Danke allen!
Sie können dies mit reinem CSS wie folgt erreichen,
%Vor%Mit diesem CSS,
%Vor%Denken Sie daran
Das Etikett muss hinter dem Kontrollkästchen sein, so dass Sie es mehr umgestalten müssen, um das gleiche Aussehen zu behalten, das Sie hatten.
Hier ist eine Option, es so zu gestalten, dass es genauso aussieht, wie Sie es wollten, Neue Geige . Dies bedeutet nicht, etwas absolutes zu positionieren, nur ein paar Tricks.
Sie können das Label nicht direkt über nur CSS formatieren, wenn das Label markiert ist, aber Sie können ein gleiches Element des Kontrollkästchens stylen.
HTML
%Vor%CSS
%Vor%Sie können auch mit Floats und Padding experimentieren, um das Kontrollkästchen so aussehen zu lassen, als ob es innerhalb der .label-text span. wäre.
Siehe die folgenden Links für die Browserunterstützung für den gleichrangigen Selektor: Ссылка
Alternativ, wie eine andere Antwort sagte, können Sie das Label stylen, wenn es ein Geschwister des Kontrollkästchens ist - aber dann würde meine Antwort immer noch nicht das Kontrollkästchen im Label enthalten.