CSS -webkit-appearance:none;导致复选框不被选中

前端之家收集整理的这篇文章主要介绍了CSS -webkit-appearance:none;导致复选框不被选中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所有,
我有一个复选框,我将以下CSS样式应用于:
-webkit-appearance: none;

同样的代码在我的一些文本字段上,这些仍然可以继续正常工作.为什么此功能导致不允许选中复选框?

我喜欢这种方式的复选框样式,但仍需要功能才能工作.如果我将代码更改为:

-webkit-appearance: checkBox;

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

解决方法

你刚刚在WebKit上修改了所有类型的复选框,所以是的,你无法看到它们是否被选中(它们仍然存在,对于没有屏幕阅读器的视力正常的人来说,它是不可见的).

您需要使用: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! */
}

编辑:

>外观:现在没有在WebKit / Blink(caniuse)之外存在.如果你做的比手工添加前缀更好,只需使用Autoprefixer

猜你在找的CSS相关文章