CSS radio:checked doesn't work for changing background image

Question

我做错了什么？

每个单选按钮都有不同的背景图像。

当我悬停它时它会改变背景，但当它被选中时它会返回灰色并且不保留背景 改变了。

好吧，我尝试将 input[type:'radio']:checked 更改为 input:check，但仍然不起作用。

不太明白如何

<h2 class="mood-header">Mood Barometer</h2>

<div class="mood-box" style="text-align:center;">
    <label>How are you feeling today?</label>
    <div class="mood-radios" style="display:flex; justify-content:space-around">
        <p>
            <label class="type-happy"><input type="radio" name="mood" value="happy">Happy</label>
        </p>
        <p>
            <label class="type-neutral"><input type="radio" name="mood" value="neutral">Neutral</label>
        </p>
        <p>
            <label class="type-sad"><input type="radio" name="mood" value="sad">Sad</label>
        </p>
    </div>

    <div class="mood-btn">[submit "Submit"]</div>
</div>

<style>

input.wpcf7-form-control.has-spinner.wpcf7-submit {
    background-color: rgb(34 42 40);
    color: white;
    border: 1px solid rgb(96 108 104);
    padding: 8px 16px;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit:hover {
    color: rgb(76 255 201);
    border: 1px solid rgb(76 255 201);
}
.mood-header {
    margin-top: -30px;
}

.mood-radios label {
    color: transparent !important;
    height: 40px !important;
    width: 40px !important;
    background-size: cover
}

.mood-radios {
    padding-bottom: 50px;
}

.type-happy{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Slightly-Smiling-Face.png");
}

.type-sad{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Face-with-Steam-From-Nose.png");
}

.type-neutral{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Confused-Face.png");
}

.type-happy:hover,
.type-happy input[type='radio']:checked + label {
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2-2.png");
}

.type-sad:hover,
.type-sad input[type='radio']:checked + label {
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2.png");
}

.type-neutral:hover,
.type-neutral input[type='radio']:checked + label {
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2-1.png");
}

.mood-btn p {
    margin-bottom: -27px !important;
}

</style>

Answer 1

因为不能选择parent by child，所以简单的解决办法就是替换label和input

<h2 class="mood-header">Mood Barometer</h2>

<div class="mood-box" style="text-align:center;">
    <label>How are you feeling today?</label>
    <div class="mood-radios" style="display:flex; justify-content:space-around">
        <p>
             <input type="radio" name="mood" value="happy">
            <label class="type-happy">Happy</label>
           
        </p>
        <p>
            <input type="radio" name="mood" value="neutral">
            <label class="type-neutral">Neutral</label>
        </p>
        <p>
            <input type="radio" name="mood" value="sad">
            <label class="type-sad">Sad</label>
        </p>
    </div>

    <div class="mood-btn">[submit "Submit"]</div>
</div>

<style>

input.wpcf7-form-control.has-spinner.wpcf7-submit {
    background-color: rgb(34 42 40);
    color: white;
    border: 1px solid rgb(96 108 104);
    padding: 8px 16px;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit:hover {
    color: rgb(76 255 201);
    border: 1px solid rgb(76 255 201);
}
.mood-header {
    margin-top: -30px;
}

.mood-radios label {
    color: transparent !important;
    height: 40px !important;
    width: 40px !important;
    background-size: cover
}

.mood-radios {
    padding-bottom: 50px;
}

.type-happy{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Slightly-Smiling-Face.png");
}

.type-sad{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Face-with-Steam-From-Nose.png");
}

.type-neutral{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Confused-Face.png");
}

.type-happy:hover
{
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2-2.png");
}

.type-sad:hover
 {
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2.png");
}

.type-neutral:hover
 {
    background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2-1.png");
}
/* new code*/
input[type='radio']:checked ~ label{
  background-image: url("https://inside.god.dev/wp-content/uploads/2023/03/Property-1Variant2-1.png");
}
.mood-btn p {
    margin-bottom: -27px !important;
}

</style>