gpt4 book ai didi

html - 复选框的自定义图片?

转载 作者:技术小花猫 更新时间:2023-10-29 12:50:06 24 4
gpt4 key购买 nike

我想将复选框显示为切换按钮。但是我无法使用 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 解决方案,那么您必须在标记中添加 label 。这是一个技巧 & 像这样写:

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 - 复选框的自定义图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8667528/

24 4 0
文章推荐: javascript - Jquery 或 javascript 在
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com