如何在 :focus 上正确设置 Select2 轮廓的样式？

Posted 2023-05-07

【中文标题】如何在 :focus 上正确设置 Select2 轮廓的样式？

【英文标题】：How to properly style the Select2 outline on :focus?

【发布时间】：2017-01-10 15:52:43

【问题描述】：

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

问题：

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

CSS：

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

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

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

【参考方案1】：

这似乎可以解决问题：

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

这里是a plunk。

【讨论】：

啊，是的！感谢 Dave，这比我的初始解决方案清洁 100%：select + span.select2:focus, select + span.select2 *:focus outline-color: #7d3c8c; outline-width: 1px;

【参考方案2】：

这对我有用：

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

【参考方案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;

希望这会有所帮助，干杯。

【讨论】：

它以某种方式向我解释了为什么会出现这个问题，但我没有从引导程序实现表单，所以这个解决方案对我不起作用。但是感谢您的时间和精力！

【参考方案4】：

它使用的是盒子阴影，而不是轮廓，看看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);

所以你需要重置它

【讨论】：

我 100% 确定它没有使用 box-shadow，坦率地说，这没有用。

更新：这主要是因为我没有为这个表单使用引导程序

我已按照您的喜好选择2，所以我认为您使用的是旧版本

嗯，package.json 在我的node_modules 中告诉我我正在："version": "4.0.3",