HTML / CSS自定义复选框按钮图像问题 [英] HTML/CSS Custom checkbox Button Image Issue

问题描述

我一直在尝试取得自订核取方块，与我的网站一起使用。但是，我遇到了一个令人困惑的问题与我的HTML的特定部分。

I have been trying to get Custom checkboxes to work with my site. However, I've run into a puzzling issue with a specific part of my HTML.

以下是我目前的程式码：
HTML

Here is my current code: 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）。但是，自定义图像不会与复选框一起显示。

Now, as you can see from my CSS, I have two patterns that I want to be styled. The label > input[type="checkbox"] 'pattern' should be applied to my HTML (which it is, according to FireBug). However, the custom image does not display with the checkbox.

总之，我的问题很简单：为什么'pattern' label>

To sum it up, my question is simple: Why is the 'pattern' label > input[type="checkbox"] not working for my HTML?

推荐答案

您可以自定义复选框的输入[type =checkbox] 和单选按钮只是CSS如果你喜欢。 https://www.google.com/search?q=css%20only ％20custom％20checkbox 。基本思想是对标签设置样式，并隐藏实际的复选框。单击标签可设置/取消复选框，因此保留所有表单功能。唯一的缺点是，旧版本的IE需要一个优雅的后备，大多数解决方案提供。

You can customize checkboxes and radio buttons with just CSS if you prefer. https://www.google.com/search?q=css%20only%20custom%20checkbox . The basic idea is to style the label and hide the actual checkbox. Clicking on the label sets/unsets the checkbox, so all the form functionality is retained. The only downside is that old versions of IE require a graceful fallback, which most of the solutions provide.

这篇关于HTML / CSS自定义复选框按钮图像问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！