Html CSS 输入[type=checkbox]:checkbox
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19362548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS input[type=checkbox]:checkbox
提问by Colbyd
I have been trying to figure out why this will not work for me. I have a CSS checkbox that I want to reposition background when checked. Can someone tell me why this isnt working?
我一直在试图弄清楚为什么这对我不起作用。我有一个 CSS 复选框,我想在选中时重新定位背景。有人能告诉我为什么这不起作用吗?
Here is original code: HTML
这是原始代码:HTML
<input type="checkbox" />
<label>Flight</label>
CSS
CSS
input[type=checkbox]{
display: none;
}
input[type=checkbox] + label{
display: inline-block;
width: 32px;
height: 32px;
padding-left: 40px;
background-position: 0 0;
background-repeat: no-repeat;
line-height: 32px;
cursor: pointer;
}
input[type=checkbox]:checked + label{
background-position: left -32px;
}
label{
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d2a60beb8fb6bbb280642579049ebf65.png);
}
Here is fixed code:
这是固定代码:
HTML
HTML
<input type="checkbox" id="travel_check" />
<label for="travel_check">Flight</label>
回答by Niet the Dark Absol
The label is not defined to point to the checkbox. In this case, you'll need an id
on the checkbox and a corresponding for
on your label.
标签未定义为指向复选框。在这种情况下,您将需要id
复选框上的 和for
标签上的对应项。