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

【问题标题】：Checkbox's outline not displaying in chrome复选框的轮廓未在 chrome 中显示
【发布时间】：2016-11-17 17:23:26
【问题描述】：

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

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

&lt;input class="blue" type="checkbox"&gt;

我错过了什么吗？

【问题讨论】：

我做了一个梦。梦想每个人都在使用 Chrome。

标签： html css google-chrome

【解决方案1】：

你的属性顺序错误，正确的是：

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

你不应该因为你的错而责怪 Chrome……

【讨论】：

【解决方案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的类

【讨论】：

【解决方案3】：

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

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

&lt;input class="blue" type="checkbox"&gt;

【讨论】：

没有-webkit-outline这样的属性
好吧，但我的 chrome 显示黄色轮廓