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

Answer 2

最佳选择是使用按钮和JavaScript创建您自己的复选框或使用JavaScript UI。但是这意味着如果未启用JavaScript，它就无法工作，因此您可能希望创建一个回退（默认显示一个复选框并使用JS将其与自定义切换出来）。

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

2 个答案: