CSS -webkit-appearance：无；导致未选中复选框 [英] CSS -webkit-appearance: none; is causing checkbox to not be checked

问题描述

全部，
我有一个复选框，我将以下CSS样式应用于此：

All, I have a checkbox that I applied the following CSS style to:

-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;

它显示标准复选框。有任何想法吗？这是一个用于演示的JS小提琴：
http://jsfiddle.net/VWC76/

It displays the standard checkbox. Any ideas? Here is a JS Fiddle for demonstration purposes: http://jsfiddle.net/VWC76/

推荐答案

您只是在WebKit上取消了所有样式的复选框，所以是的，您看不到是否对其进行了检查（它们

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).

您需要使用设置检查状态的样式：已选中伪： http://jsfiddle.net/VWC76/450/

You need to style the checked state with the :checked pseudo: 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! */
}

编辑：

• appearance：none 现在位于WebKit / Blink之外（犬）。如果您比手工添加前缀更好，请使用 Autoprefixer ：


• 一个好的实现：可访问的自定义复选框和单选表单控件

• appearance:none now exists outside of WebKit/Blink (caniuse). Just use Autoprefixer if you've better to do than adding prefixes by hand :)
• A good implementation: accessible custom checkbox and radio form controls

编辑2：

• 在小提琴演示中，添加了可聚焦的元素之前和之后的复选框以显示它可与键盘一起使用（只需单击第一次出现的测试，然后单击选项卡选项卡空间选项卡）。复选框/标签没有聚焦的视觉提示，这是一件坏事（这是演示）。 在Chrome上显示最好的这是更糟糕的事情：p（您需要使用Autoprefixer。请在Codepen上尝试）

• 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 Chrome which is a worse thing :p (you need Autoprefixer. Try on Codepen)

这篇关于CSS -webkit-appearance：无；导致未选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！