CSS -webkit-外观：无；导致复选框未被选中

Question

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

-webkit-appearance: none;

我拥有的一些文本字段上有相同的代码，这些代码仍然可以正常工作。为什么这个功能导致不允许选中复选框？

我喜欢这种复选框的样式，但仍然需要该功能才能工作。如果我将代码更改为：

-webkit-appearance: checkbox;

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

Answer 1

您刚刚在 WebKit 上取消了所有样式的复选框，所以是的，您看不到它们是否被选中（它们仍然是，只是我们没有屏幕阅读器的有视力的人看不到）。

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

编辑：

• appearance:none 现在存在于 WebKit/Blink (caniuse) 之外。如果您比手动添加前缀更好，请使用Autoprefixer :)
• 一个很好的实现：accessible custom checkbox and radio form controls

编辑 2：

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

Answer 2

你需要添加一个输入[type=checkbox]:checked

input[type=checkbox]:checked {
   background: #BADA55;
}

如果这是你要找的？

Answer 3

禁用外观也会删除选中的外观。您还需要添加样式来定义复选框在选中时的显示方式。

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

查看下面的小提琴示例：

http://jsfiddle.net/8n8hM/

Answer 4

个性化checkbox 或跨浏览器的单选按钮的最佳方法是使用您为checkbox 设置的label。 在您的 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">&nbsp</label>

看到这个jsfiddle。