HTML/CSS 自定义复选框按钮图像问题答案

【问题标题】：HTML/CSS Custom checkbox Button Image IssueHTML/CSS 自定义复选框按钮图像问题
【发布时间】：2013-08-06 20:18:01
【问题描述】：

我一直在尝试让自定义复选框与我的网站一起使用。但是，我的 HTML 的特定部分遇到了一个令人费解的问题。

这是我当前的代码： HTML

<div class="quicklinks_login">
    <label for="cookieuser" style="padding-left: 7px;"><input type='checkbox' name='cookieuser' value='1' tabindex='10' id='cb_cookieuser_navbar' accesskey='c' />&nbsp;Remember Me</label>
</div>

CSS

input[type="checkbox"] + label,
label > input[type="checkbox"] {
    background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
}

现在，您可以从我的 CSS 中看到，我有两个想要设置样式的模式。标签 > input[type="checkbox"] 'pattern' 应该应用于我的 HTML（根据 FireBug 就是这样）。但是，自定义图像不会与复选框一起显示。

总而言之，我的问题很简单：为什么“模式”label > input[type="checkbox"] 不适用于我的 HTML？

【问题讨论】：

标签： html css checkbox

【解决方案1】：

如果您愿意，可以仅使用 CSS 自定义复选框和单选按钮。 https://www.google.com/search?q=css%20only%20custom%20checkbox 。基本思想是设置标签样式并隐藏实际的复选框。单击标签设置/取消设置复选框，因此保留所有表单功能。唯一的缺点是旧版本的 IE 需要优雅的回退，而大多数解决方案都提供了这种回退。

【讨论】：

【解决方案2】：

这是浏览器不允许您设置样式的元素之一这么多，而且大多数人都用 javascript 替换它。

@levente-nagy 在SO 上回答

【讨论】：