如何在不影响引导 css 样式的情况下更改 <select> 元素的边框颜色？答案

【问题标题】：How can I change the border color on my <select> element without effecting bootstrap css styling?如何在不影响引导 css 样式的情况下更改 <select> 元素的边框颜色？
【发布时间】：2021-04-12 21:56:03
【问题描述】：

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

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

ELEMENT.style.borderColor = "red";

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

为了便于比较，我没有改动底部的那个。

我是不是强调错了？是否有一些我应该使用的 CSS 类来代替更改边框颜色？

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

【问题讨论】：

你能创建和分享一个最小的代码沙箱吗？
@ZamAbdulVahid 不是网络开发人员，所以我以前从未使用过其中的一个，尽管我见过他们。有时间我可以试试看。
同时尝试将其添加到您的脚本中。 ELEMENT.style.borderWidth = "1px";
@ZamAbdulVahid 红色边框的宽度肯定会改变，但引导样式仍然消失
见stackoverflow.com/questions/38851856/…

标签： javascript html css bootstrap-4

【解决方案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");

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

【讨论】：

我很确定 bootstrap 有这个，但由于某种原因找不到它。谢谢。

【解决方案2】：

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

喜欢这个

element.classList.add("mystyle");

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

【讨论】：

【解决方案3】：

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

【讨论】：

不确定这些课程在哪里。就像我说的 - 我不是网络开发人员，所以我可能会遗漏一些东西，但我在 Firefox 的开发工具中看不到它们。我选择了 select 元素，并取消选中它上面的每一个 CSS 属性，select 上的箭头仍然是花哨的引导箭头。不确定它是如何设置这些的，或者为什么设置边框颜色会删除它们。在 select 上的 firefox 开发工具中设置内联属性以更改边框颜色与我看到的一样 - 删除了花哨的引导格式。不知道为什么。
这个答案stackoverflow.com/a/29513693/1011984 建议摆脱 Firefox 自己的 chrome，以便您的样式（或 Bootstrap 的）可以看到。
@RichDeBourke 使用那篇文章中的类，它确实摆脱了花哨的样式，但引导程序并没有用它自己的样式替换它，所以它仍然是超级基本的。