[ERLEDIGT] :checked funktioniert nicht // Lösung: ID im "input" hat gefehlt

[annsen]

Ich habe grad mal getestet, wie ich einen Radio-Button mit einer eigenen Grafik gestalten kann.

Es gibt 2 Grafiken - die Original-Grafik (rb.png) und die ":checked"-Grafik (rbc.png). Die Original-Grafik wird auch geladen aber die ":checked"-Grafik wird nicht geladen. Die Verlinkungen müssen aber beide stimmen, denn wenn ich im CSS die Bezeichnung ändere, wird die andere (":checked"-)Grafik geladen.
Das heißt für mich, dass der Fehler im letzten CSS-Absatz (":checked") zu finden sein muss aber ich finde keinen Fehler. Hat jemand einen Tipp?

Vielen Dank vorab!!!

<div>
    <input type="radio" name="rb" value="ok"/>
    <label for="radio"><span></span>Beschriftung des Radio-Button</label>
</div>

input[type="radio"] {
    display: none;
    background-size: contain;
}

label {
    padding: 1em;
}

input[type="radio"] + label span {
    background-image: url(img/rb.png);
    display: inline-block;
    cursor: pointer;
}

input[type="radio"]:checked + label span {
    background-image: url(img/rbc.png);
}

 

[Sailor]

Nutze eine 'checkbox' statt des Radiobuttons, das sollte dann klappen.

 

[annsen]

Ich hab jetzt einfach mal die 2 Einträge im HTML und die 3 Einträge im CSS von "radio" auf "checkbox" geändert. Der Rest kann dann ja exakt so bleiben wie bisher?
Leider keine Änderung. Die "Standard"-Grafik lädt aber die ":checked"-Grafik nicht...

 

[Sailor]

ok... dann teste mal meinen Code

<div>
    <input type="checkbox" id="box" name="rb">
    <label for="box"><span></span>Beschriftung des Checkbox</label>
</div>

input[type="checkbox"] {
    display: none;
}

label {
    padding: 1em;
}

input[type="checkbox"] + label span {
    background-image: url(img/rb.png);
    display: inline-block;
    cursor: pointer;
    width: 80px;
    height: 80px;
        background-size: cover;
}

input[type="checkbox"]:checked + label span {
    background-image: url(img/rbc.png);
    display: inline-block;
    cursor: pointer;
    width: 80px;
    height: 80px;
    background-size: cover;
    }

Die Änderungen, die ich gemacht habe, siehst du bestimmt auf Anhieb.. die Checkbox bekommt eine ID... das Label for diese ID und die Formate für das span, in dem ja das Background Image angezeigt werden soll.

 

[annsen]

Das wars - vielen Dank!(!!!!!)