Question

请注意，HTML无法修改。

HTML：

<div class="form-group newsletter">
    <div class="checkbox">
        <label><input name="newsletter" type="checkbox" value="Sign me up for exclusive discounts and style advice by email, post and text" aria-invalid="false">Sign me up for exclusive discounts and style advice by email, post and text</label>
    </div>
</div>

SASS：

.form-group {
    input {
        opacity: 0;
    }
    label {
        &:after {
            float: left;
            display: block;
                content: "";
            width: 52px; height: 52px;
                margin-right: 35px;
            background: url('../img/checkbox-default.png') no-repeat;
        }
        input:checked ~ &:after { // This. Not sure how to make this work
            background: url('../img/checkbox-checked.png') no-repeat;
        }
    }
}

https://jsfiddle.net/dfx78wob/

Answer 1

这technically将解决您的问题......

.form-group label:has(input:checked):after {
    background: url('../img/checkbox-checked.png') no-repeat;
}

...希望大约3年后。

Answer 2

输入标签没有兄弟元素，因此使用~将不起作用。您需要向输入标记添加兄弟元素或向label元素添加类。因为，您无法更改HTML，只有使用JavaScript才能解决问题，在选中输入时必须向label元素添加类。

input.addEventListener('change', function(){
    var type = this.checked? "add": "remove";
    this.parentElement.classList[type]('checked');
}

在CSS中：

label{
    &.checked::after{  /* instead of "input:checked ~ &:after" */
     /* checked styles here */
    }
}

顺便说一句，将空元素与输入标记相邻（因为输入不能包含伪元素）总是更好的策略。所以，你不会在这样的情况下结束：）

Answer 3

<强>样本：

https://jsfiddle.net/dfx78wob/2/

您已使用~运算符，但label是标记中的父元素。目前在CSS中没有父选择器。

因此，我修改了html以使标签成为输入的兄弟，并修改了样式规则以使用+代替~，因为+将选择紧邻的下一个元素而~ 1}}将选择兄弟但不一定是下一个。

<强> HTML：

<div class="form-group newsletter">
    <div class="checkbox">
        <input name="newsletter" type="checkbox" value="Sign me up for exclusive discounts and style advice by email, post and text" aria-invalid="false" id="checkbox1">
        <label for="checkbox1">Sign me up for exclusive discounts and style advice by email, post and text</label>
    </div>

<强> SCSS：

.form-group {
    input {
        opacity: 0;
    }
    label {
        &:after {
            float: left;
            display: block;
                content: "";
            width: 52px; height: 52px;
                margin-right: 35px;
            background: red;
        }
   }
  input:checked+label:after { // This. Not sure how to make this work
    background: green;
  }
}

Answer 4

除非你修改HTML并且这对我来说不是一个选项，否则无法做到这一点，所以最后我使用了JS，因为这是我唯一的选择：

$('<span class="check">').insertAfter( $('.checkbox.newsletter label input') );

谢谢@Sarcoma！很好的射击在输入的伪元素。它本身并不意味着（该死的你为什么要离弃我！）。

CSS更新：检查输入后

4 个答案: