html - 如何使用 CSS3 将背景颜色应用于复选框？

Question

几个小时以来，我一直在寻找这个问题的解决方案，但没有任何运气。似乎每个人都使用背景图片来解决他们的问题，而我只想使用一种颜色，这样解决方案就可以更好地扩展，而无需为移动设备提供额外的 CSS。

我几乎有了一个可行的解决方案，但是 1) “复选框”不像标签的其余部分那样可以点击； 2)我似乎无法找到任何方法在不改变 HTML 的情况下在标签和“复选框”之间添加空间(我不想做的事情，但如果没有可行的纯 CSS 或 JQuery 解决方案，我会尝试) .

这是 HTML:

<div id="edit-field-school-education-und" class="form-checkboxes">
    <div class="form-item form-type-checkbox form-item-field-school-education-und-28">
        <input type="checkbox" id="edit-field-school-education-und-28" name="field_school_education[und][28]" value="28" checked="checked" class="form-checkbox">  
        <label class="option" for="edit-field-school-education-und-28">Evening Classes &amp; Distance Learning </label>
    </div>
     ......  Repeated for several checkboxes   .......
</div>

到目前为止，这是我的 CSS:

.form-checkbox {display:none}
.form-checkbox + label:before {content: "\00a0\00a0\00a0\00a0"; height: 19px; width: 19px; border: 1px  solid black; cursor:pointer; }
input[type="checkbox"]:checked + label:before {background-color: #34c1ce;}

我更喜欢 CSS3 解决方案，但也可以使用通用 HTML 或 JS 解决方案。我没有基于 ID 等的解决方案，因为复选框列表可能随时增长。但是，我可能会想出一种方法来输出具有相同标签文本的 div。

Answer 1

您不能为复选框设置背景颜色，它根据浏览器而不是 css 呈现，但您可以设置背景图像，这是一个方便的教程

http://www.whatstyle.net/articles/18/pretty_form_controls_with_css