自定义图片的复选框？ [英] Custom pictures for checkbox?
本文介绍了自定义图片的复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想显示复选框为切换按钮。但我不能应用我的自定义图片与它CCS - 仍然复选框被绘制。如何完成此任务？
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?
我的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>
推荐答案
如果你想要的是 css 解决方案，那么您必须在您的标记中添加标签。这是一个技巧&写lke这个：
If you want it's with pure css solution then you have to add label in your markup . It's a trick & write lke this:
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 &
这篇关于自定义图片的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
