如何正确设置Select2轮廓的样式：焦点？

Question

我使用Select2来设置<select>框的样式，但我似乎无法设置Chrome应用于样式的强制轮廓：

问题：

我已尝试了几行（非常不专业，!important）CSS代码，但到目前为止我还没有提出解决方案，这就是我正确的方法现在：

CSS：

.select2 > *:focus, .select2:focus .select2 > *, .select2 {
    outline-width: 0px !important;
}

为了排除潜在的问题，我确实包含了这个CSS文件，之后我的常规select2.css

另外，小提琴会有问题，但如果真的有必要，我可以提供一个

Answer 1

这似乎可以解决问题：

  <style>
    .select2-container *:focus {
        outline: none;
    }
  </style>

这是a plunk。

Answer 2

那是因为select2或chrome都不使用outline属性。以下是select2（+ bootstrap）中select:focus伪元素的实际定义：

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

请尝试更改border和box-shadow：

.form-control:focus {
    border-color: unset;
    -webkit-box-shadow: none;
    box-shadow: none;
}

希望这会有所帮助，欢呼。

Answer 3

这对我有用：

&.select2-container--focus {
    outline: none;
}

Answer 4

使用框阴影而非轮廓，请看检查员：

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

所以你需要重置它