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

【问题标题】：Checkbox highlight not working when its checked选中时复选框突出显示不起作用
【发布时间】：2016-10-27 20:28:26
【问题描述】：

我在我的 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;
}

【问题讨论】：

这可能是一个错字，但不确定。 label:after 而不是 label::after
:after 伪选择器需要 content: 'x' 才能出现。
@Roy_Dorsthorst 不是 :) impressivewebs.com/before-after-css3
@Roberrrt 感谢您提供该文档！有道理。
@Roberrrt 感谢您的评论他们之间没有区别

标签： html checkbox highlight

【解决方案1】：

 <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】：

您有点偏离轨道，您无法设置原始 <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

【讨论】：

您的工作示例的链接不是正确的链接，我已经尝试过仍然无法正常工作