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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:26:09  来源:igfitidea点击:

CSS input[type=checkbox]:checkbox

htmlcss

提问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); 
}

Demo

演示

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 idon the checkbox and a corresponding foron your label.

标签未定义为指向复选框。在这种情况下,您将需要id复选框上的 和for标签上的对应项。

http://codepen.io/anon/pen/Eauxc

http://codepen.io/anon/pen/Eauxc