html – 复选框的自定义图片？_html-js-css

概述我想显示复选框作为切换按钮.但是我不能使用CCS将自定义图片应用到它 – 然后复选框被绘制.如何适应这项任务？我的CSS： input[type=checkbox]#settingsbutton { border-style: none; background-color: transparent; width: 42px; height: 40px; d 我想显示复选框作为切换按钮.但是我不能使用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" /> </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" /><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 – 复选框的自定义图片？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1141214.html

html – 复选框的自定义图片？

发表评论

评论列表（0条）