复选框的轮廓未显示在chrome中

Question

我们希望Chrome更好，但实际情况是它仍然不如Firefox。

.blue {
  outline: thin dotted yellow;
  outline-offset: -2px
}

<input class="blue" type="checkbox">

我错过了什么吗？

Answer 1

您的财产订单错误，正确的是：

[!] Unable to find a specification for `SideMenu~> 2.0`

你不应该责怪Chrome是你的错......

Answer 2

你可以使用这个在IE和Chrome中运行的hack，但实际上不应该这样，因为checkbox没有内容，因此不能拥有::before。

.page input[type=checkbox].form-input-error:not([disabled])::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

它的作用：

• 添加3px红色边框
• 如果未禁用复选框
• 如果它有一个名为.form-input-error
的类

Answer 3

我在chrome上查看它。没关系。像这样：

＆＃13;

＆＃13;

.blue {
  outline: yellow dotted thin;
  -webkit-outline: yellow dotted thin;
  outline-offset: -2px
}

＆＃13;

<input class="blue" type="checkbox">

＆＃13;

＆＃13;

＆＃13;