html - 如何更改复选框 :checked? 上的父 div

Question

我使用以下代码为复选框使用自定义 UI:

<div class="checkboxWrapper">
  <input type="checkbox" class="receipt" name="receipt" id="receipt" />
</div>

还有 CSS:

.checkboxWrapper {
    display: inline-block;
}

/* This is the invisible checkbox */
.checkboxWrapper input[type="checkbox"] {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 120;
    opacity: 0;
}

/* This is a div simulating a checkbox */
.checkboxWrapper:after {
    content: ' ';
    display: block;
    position: relative;
    top: 2px;
    left: 3px;
    z-index: 100;
    //margin: 16px 0 0 16px;
    height: 16px;
    width: 16px;
    overflow: hidden;
    background-image: url(../images/checked.png);
    background-position: 0 0;
}

然后我尝试在选中复选框时更改背景图像位置:

input[type="checkbox"]:checked .checkboxWrapper:after {
    background-position: 16px 0;
    background-color: indianred;
}

这可能吗？这是 fiddle :http://jsfiddle.net/LbSpX/

Answer 1

在 css 中，如果结构是这样，您可以从标签中绘制自定义复选框:

<input type="checbox" id="ckb" /> <label for="ckb">label</label>CSS可以是

input + label { /* style */}
input:checked + label {/* other style }
/* or and with before/after */
input + label:before { /* style */}
input:checked + label:before {/* other style }

使用 radio 和绘制复选框的示例:http://codepen.io/anon/pen/vhgqj/

使用高级选择器隐藏和绘制输入的旧示例过滤器