如何更改我的边框颜色<select>元素不影响引导 css 样式？

Question

我有一个引导程序 (v4.5.3) 表单，我的选择在 Firefox 中如下所示：

当有人尝试提交表单时，我会运行一些 JS 代码并进行验证。 它检查的一件事是有人实际上选择了一个选项，并且没有将其保留-- Select an Option -- 。 当我检测到这一点时，我的 javascript 将停止表单提交，并通过将边框设置为红色来突出显示该选项：

ELEMENT.style.borderColor = "red";

不幸的是，当我这样做时，我的选择丢失了它上面的任何样式引导程序，看起来像这样：

为了便于比较，我保留了底部的一个不变。

我突出显示错误吗？ 是否有一些我应该使用的 css 类而不是更改 borderColor？

编辑：例如参见https://jsfiddle.net/xbqucoLp/

Answer 1

Bootstrap 实际上内置了验证 CSS。 bootstrap 中选择的样式与您在问题中的样式不同，因此可能不符合您的喜好。 然而，与您目前拥有的不同，它确实使选择箭头保持一致。 有关详细信息，请参阅https://getbootstrap.com/docs/5.0/forms/validation/

这是一个工作小提琴： https : //jsfiddle.net/0gqL7641/1/

使用它的好处是当您选择一个选项时，它会从红色变为绿色。

如果您无法接受上述内容，则以下内容将起作用：

您可以使用轮廓而不是边框​​，这不会改变选择的样式

this.style.outline = "solid 1px red";

另一种在不接触边框的情况下更改轮廓的方法是使用阴影

.redOutline {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5); 
    box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}

并使用以下内容添加轮廓

this.classList.add("redOutline");

您可以使用此工具调整阴影 CSS https://html-css-js.com/css/generator/box-shadow/

Answer 2

您是否尝试过向元素添加类？

像这样

element.classList.add("mystyle");

只要该类包含的唯一内容是带有 !important 的边框颜色，这可能会起作用

Answer 3

啊我没有意识到有区别抱歉。 通常对于这些自定义选择，有一些类覆盖浏览器选择以获取自定义功能。 我会看看你是否可以定位这些类并更改它们的边框颜色。 在浏览器中查找元素 dev-tools 允许您在浏览器中更改它们的 css 以测试您是否可以这样做以查看您需要定位的元素。