Question

我一直在努力让自定义复选框与我的网站一起使用。但是，我在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中看到的，我有两个我想要设计样式的模式。标签＆gt;输入[type =“checkbox”]'pattern'应该应用于我的HTML（根据FireBug，它是）。但是，自定义图像不会显示复选框。

总结一下，我的问题很简单：为什么'模式'label > input[type="checkbox"]不能用于我的HTML？

Answer 1

这是浏览器不会让你风格的元素之一那么多，大多数人用javascript替换它。

在@ {levente-nagy

上回复SO

Answer 2

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

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

2 个答案: