0

几个小时以来，我一直在寻找解决此问题的方法，但没有任何运气。似乎每个人都使用背景图像来解决他们的问题，而我只想使用一种颜色，以便解决方案可以更好地扩展，而无需移动设备需要额外的 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。

4

2 回答 2

2

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

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

于 2013-01-31T01:49:15.230 回答
1

最好的选择是使用按钮和 JavaScript 或使用 JavaScript UI 创建您自己的复选框。然而，这意味着如果 JavaScript 未启用，则它不起作用，因此您可能希望创建一个回退（默认显示一个复选框并使用 JS 将其切换为自定义复选框）。

于 2013-01-31T01:53:11.730 回答