复选框的自定义图片？答案

【问题标题】：Custom pictures for checkbox?复选框的自定义图片？
【发布时间】：2011-12-29 11:53:41
【问题描述】：

我想将复选框显示为切换按钮。但我无法使用 CCS 将我的自定义图片应用于它——仍然绘制了复选框。如何完成这项任务？

我的 CSS：

input[type=checkbox]#settingsbutton {
    border-style: none;
    background-color: transparent;
    width: 42px;
    height: 40px;
    display: block;
}

input[type=checkbox].button-settings {
    background-image: url("images/button-settings-normal.png");
}

input[type=checkbox].button-settings:active {
    background-image: url("images/button-settings-normal.png");
}

input[type=checkbox].button-settings:hover {
    background-image: url("images/button-settings-hover.png");
}

input[type=checkbox].button-settings:active {
    background-image: url("images/button-settings-pressed.png");
}

我的 HTML：

 <body>

<input type="checkbox" id="settingsbutton" class="button-settings"/>

 </body>

【问题讨论】：

标签： html css checkbox custom-controls

【解决方案1】：

如果你想要纯 css 解决方案，那么你必须在你的标记中添加 label 。这是trick 并写成这样：

input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label{
    height: 40px;
        width: 42px;
} 
body:not(#foo) input[type=checkbox]:checked + label{
    background-image: url("images/button-settings-normal.png");
} 

body:not(#foo) input[type=checkbox] + label{
    background-position:0 -46px; /* as per your requirement*/
    height: 40px;
}

HTML

<body>

<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>

 </body>

阅读这些文章：

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

但它不适用于IE8 及以下

【讨论】：

链接真的很有用，但我不明白你为什么在复选框上使用display:none？如果它没有显示，你不能点击它？您的链接建议将不透明度设置为零。
您可以单击将激活复选框的标签

【解决方案2】：

有关样式复选框的信息，请参见此链接：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

解决方案包括隐藏复选框并添加样式元素来代替它，以模拟复选框的行为。

【讨论】：

是的，看到了这段文字，但想知道是否可以仅使用 CSS

【解决方案3】：

如果标签中有一些文字，请尝试此解决方案

input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label:before{
    height: 42px;
    width: 42px;
    content: url("../img/chk.jpg");
} 
body input[type=checkbox]:checked + label:before{
    content: url("../img/chk_checked.jpg");
}

【讨论】：