HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 复选框的自定义图片?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_874_0@
我想显示复选框作为切换按钮.但是我不能使用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>

解决方法

如果您想要纯粹的CSS解决方案,那么您必须在标记中添加标签.这是一个戏法写这个:
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&下面

大佬总结

以上是大佬教程为你收集整理的html – 复选框的自定义图片?全部内容,希望文章能够帮你解决html – 复选框的自定义图片?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。