Question

我正在尝试更改我的标签的样式：在选择复选框之前的内容之前，不幸的是因为我在drupal工作我无法改变HTML结构（真的，我只是不能这样请不要提供暗示的答案更改html结构）所以我必须找到一种方法来选择使用css3选中复选框时的标签。到目前为止，我找不到可以帮助我的3级选择器。这是html：

<div class="form-type-checkbox form-item-submitted-legal-conditions-1 form-item checkbox">
<label for="edit-submitted-legal-conditions-1"> 
<input required="required" type="checkbox" id="edit-submitted-legal-conditions-1" name="submitted[legal_conditions][1]" value="1" class="form-checkbox"> I accept the <a class="popup-legal" href="#">legal terms and conditons</a> </label>
</div>

这是css：

input {opacity:0;}

.form-item-submitted-legal-conditions-1 > label:before  {
    float:left;
    height:22px;
    width:22px;
    content:"";
    border:1px solid #201747;
    display:inline-block;
    margin: .2em .5em 0 0;
}

.form-item-submitted-legal-conditions-1 input[type=checkbox].form-checkbox:checked ~ label:before {
    background-color: #c8102e;
}

这是一个codepen：

codepen code

在父标签标签内更改复选框选定的样式

0 个答案: