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

标签 html css checkbox

我一直在尝试让自定义复选框与我的网站一起使用。但是,我的 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?

最佳答案

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

关于HTML/CSS 自定义复选框按钮图像问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18069779/

相关文章:

html - 如何使背景(颜色,而不是 img)响应?

javascript - 以从服务器接收到的字节形式播放 wav 文件

html - 使用 CSS 和 HTML 的平铺布局

Javascript 定位 tr 元素

php - 如何制作 HTML 输入字段文本区域,使其由其值的大小决定

html - 不悬停时图像变大

html - CSS 在确定父级大小时忽略一个元素

html - 奇怪的复选框行为,在不同的浏览器中

javascript - 通过 Javascript 在复选框更改时隐藏或显示中继器内的跨度

php - 序列化复选框数组,也得到有关闭值的复选框