Dim*_*ims 11 html css checkbox custom-controls
我想将复选框显示为切换按钮.但我无法使用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>
san*_*eep 15
如果你想要它是纯粹的css解决方案,那么你必须添加label你的标记.这是一个trick&写lke这个:
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以下
| 归档时间： |
|
| 查看次数： |
30702 次 |
| 最近记录： |