Html 复选框的自定义图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8667528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom pictures for checkbox?
提问by Dims
I would like to show checkbox as toggle button. But I can't apply my custom pictures to it with CCS -- still checkbox is drawn. How to accomlish this task?
我想将复选框显示为切换按钮。但是我无法使用 CCS 将我的自定义图片应用于它——仍然绘制了复选框。如何完成这个任务？
My CSS:
我的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");
}
My HTML:
我的 HTML：
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
</body>
回答by sandeep
If you want it's with pure csssolution then you have to add labelin your markup . It's a trick& write lke this:
如果你想要它的纯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
HTML
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>
</body>
Read these articles :
阅读这些文章：
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
But it's not work in IE8& below
但它不适用于IE8及以下
回答by techfoobar
See this link for styling check-boxes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
请参阅此链接以了解样式复选框：http: //ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The solution involves hiding the check-box and adding a styled element in place of it, which emulates the check-box's behavior.
解决方案包括隐藏复选框并添加样式元素来代替它，从而模拟复选框的行为。
回答by Николай Новиков
Try this solution if you have some text in label
如果标签中有一些文本，请尝试此解决方案
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");
}
