我想显示复选框作为切换按钮.但是我不能使用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&下面
