Question

我在html页面中包含了一些复选框，因此用户可以选中并取消选中它们，我还编写了样式以突出显示复选框边框以及标签，但仍无效。

可以提供一些帮助。

<input type="checkbox" name="createartwork" id="createartwork"> 
<label class="label-for-check" for="createartwork">I want your Designer to create my artwork</label> 


input[type=checkbox]:checked  + label::after{
    background-color: #FD6418;
}


input:checked {
    height: 50px;
    width: 50px;
}

Answer 1

您有点偏离轨道，您无法设置原始<input>标记的样式，可以伪造带有标签的新复选框，因此请使用您提供的代码：< / p>

HTML：

<input type="checkbox" name="createartwork" id="createartwork"> 
 <label class="label-for-check" for="createartwork">
 I want you  to create my artwork</label>

CSS：

input[type=checkbox]
+ label::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #FF0;
    margin-right: 5px;
    padding: 0px 5px;
}
input[type=checkbox]:checked + label::before{
    content: 'x';
    background-color: #FF0;
    margin-right: 5px;
    padding: 0px 5px;
}

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

当然，a working example

Answer 2

 <input type="checkbox" name="createartwork" id="createartwork"> 
 <label class="label-for-check" for="createartwork">I want you  to create my artwork</label> 

:checked + label {
  background-color: #FD6418;
  font-weight: bold;
}

试试这个。

选中后，复选框突出显示不起作用

2 个答案: