如何在 :focus 上正确设置 Select2 大纲的样式？

Question

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

问题：

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

CSS:

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

为了排除潜在的问题，我肯定包含这个 CSS 文件，在我的常规 select2.css

之后

此外，fiddle会有问题，但如果确实需要，我可以提供

Answer 1

这似乎可以解决问题：

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

这里是a plunk.

Answer 2

它用的是box shadow，不是outline，看inspector:

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

所以你需要重置它

Answer 3

那是因为 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 4

这对我有用：

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

如何在 :focus 上正确设置 Select2 大纲的样式？

How to properly style the Select2 outline on :focus?

javascript

css

jquery

jquery-select2