Question

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

-webkit-appearance: none;

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

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

-webkit-appearance: checkbox;

显示标准复选框。有任何想法吗？这是一个用于演示目的的JS小提琴： 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：

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

Answer 2

您需要添加输入[type = checkbox]：已选中

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或跨浏览器工作的单选按钮的最佳方法是使用您为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">&nbsp</label>

请参阅此jsfiddle。

CSS -webkit-appearance：none;导致复选框无法选中

4 个答案: