复选框突出显示在选中时不起作用

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> 标签的样式，你可以用你的标签伪造一个新的复选框，所以使用代码你提供：

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;
}

试试这个。

复选框突出显示在选中时不起作用

Checkbox highlight not working when its checked

html

checkbox

highlight