CSS -webkit-appearance：无；导致未选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20057581/
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 -webkit-appearance: none; is causing checkbox to not be checked
提问by user1048676
All, I have a checkbox that I applied the following CSS style to:
所有，我有一个复选框，我将以下 CSS 样式应用于：
-webkit-appearance: none;
This same code is on some text fields I have and these still continue to work just fine. Why is this functionality causing the checkbox to not allowed to be checked?
相同的代码位于我拥有的一些文本字段中，并且这些仍然可以继续正常工作。为什么此功能会导致不允许选中复选框？
I like the styling of the checkbox this way but still need the functionality to work. If I change the code to:
我喜欢这种复选框的样式，但仍然需要功能才能工作。如果我将代码更改为：
-webkit-appearance: checkbox;
It displays the standard checkbox. Any ideas? Here is a JS Fiddle for demonstration purposes: http://jsfiddle.net/VWC76/
它显示标准复选框。有任何想法吗？这是用于演示目的的 JS Fiddle：http: //jsfiddle.net/VWC76/
回答by FelipeAls
You just nuked all styles of checkbox on WebKit, so yes you can't see whether they're checked or not (they still are, it just isn't visible to us sighted people without a screen reader).
您刚刚取消了 WebKit 上所有样式的复选框，所以是的，您无法看到它们是否被选中（它们仍然被选中，只是我们没有屏幕阅读器的视力正常的人看不到）。
You need to style the checked state with the :checkedpseudo: http://jsfiddle.net/VWC76/450/
您需要使用:checked伪代码设置选中状态的样式：http: //jsfiddle.net/VWC76/450/
input[type=checkbox]:checked {
background-color: red;
/* or whatever styles you want depending on your design */
/* be as obvious as possible that it's a checkbox and that it's checked! */
}
EDIT:
编辑：
appearance:nonenow exists outside of WebKit/Blink (caniuse). Just use Autoprefixerif you've better to do than adding prefixes by hand :)- A good implementation: accessible custom checkbox and radio form controls
appearance:none现在存在于 WebKit/Blink ( caniuse) 之外。如果您比手动添加前缀更好，请使用Autoprefixer:)- 一个很好的实现：可访问的自定义复选框和单选表单控件
EDIT 2:
编辑2：
- in the fiddle demo, adding focusable elements before and after checkbox to show it works with keyboard (just click on the first occurence of "Test" and then tab tab space tab). It lacks any visual cue that checkbox/label is focused which is a bad thing (it's a demo). Best seen on Chromewhich is a worse thing :p (you need Autoprefixer. Try on Codepen)
- 在小提琴演示中，在复选框之前和之后添加可聚焦元素以显示它与键盘一起使用（只需单击“测试”的第一次出现，然后单击选项卡空间选项卡）。它缺乏复选框/标签被聚焦的任何视觉提示，这是一件坏事（这是一个演示）。最好在 Chrome上看到，这是更糟糕的事情 :p（你需要 Autoprefixer。试试 Codepen）
回答by Ace
You need to add a input[type=checkbox]:checked
您需要添加一个 input[type=checkbox]:checked
input[type=checkbox]:checked {
background: #BADA55;
}
If this is what you're looking for?
如果这就是你要找的？
回答by Neaox
Disabling the appearance removes the checked appearance too. You also need to add styles to define how the checkbox will appear when checked.
禁用外观也会删除选中的外观。您还需要添加样式来定义复选框在选中时的显示方式。
input[type='checkbox']:checked
{
position:relative;
}
input[type='checkbox']:checked:before
{
content:'';
display:block;
width:17px;
height:16px;
position:absolute;
top:1px;
left:1px;
background:none #ACACB8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity:0.5;
}
Check out the fiddle below for an example:
查看下面的小提琴示例：
回答by service-paradis
The best way to personnalize checkboxor radio button that works cross browser is by using labelthat you set for your checkbox.
In your css, you hide your checkboxand you add any style you want for the label.
个性化checkbox或跨浏览器工作的单选按钮的最佳方法是使用label您为checkbox. 在您的 css 中，您可以隐藏您的checkbox并为标签添加任何您想要的样式。
input[type='checkbox'] {
outline: 0;
user-select: none;
display: inline-block;
position: absolute;
opacity: 0;
}
input[type='checkbox'] + label {
display:inline-block;
width:20px;
height:20px;
background-color:blue
}
input[type='checkbox']:checked + label {
background-color:red
}<input id="myChk" type="checkbox" />
<label for="myChk"> </label>See this jsfiddle.
看到这个jsfiddle。
