javascript - 选中时如何为选择及其下拉菜单设置CSS？

<分区>

我是一名后端开发人员，正在学习前端，刚接触 CSS。

在一个元素上工作，必须为 select 标签设置一个默认的 CSS。但是，单击此标签时，边框颜色将从绿色变为蓝色，文本颜色从绿色变为黑色。试图找出在点击时实现的 CSS，但没有用。 inspect 元素上可见的所有内容都是 select 上的某个事件处于事件状态。尝试在点击时添加我自己的事件并改回 CSS，但无法实现。

CSS:

.customSelect {
    border-radius: 1.25rem;
    height: calc(5.25rem + 2px);
    font-size: 3rem;
    color: #00a082;
    border: 3px solid #cbece5;
}

试图在自定义点击事件上添加相同的类，但是其他东西正在替换我的 CSS。

JS:

$("#selectId").click( () => {
    $("#selectId").addClass('customSelect');
});

如何在 select 标签及其 option 下拉菜单上添加自定义 CSS？

编辑为什么不为 how-to-style-the-option-of-a-html-select 复制一个

我的问题不是设置 option 标签的样式，而是阻止我的 select 框将边框颜色更改为蓝色，就像我们点击 select 或 input 标签，默认情况下这些更改为蓝色。像评论一样，问题标题、问题正文和答案框都在单击时将边框颜色更改为蓝色。我不希望发生这种情况。

最佳答案

想通了。这种蓝色和点击 input、select 和 textarea 标签是由于 bootstrap CSS。从 select 中删除类 form-control 并添加以下类。现在一切正常。

CSS:

/* Customized Select Box */
.customSelect {
    background-color: #fff;
    background-clip: padding-box;
    border: 0.5rem solid #cbece5;
    border-radius: 1.25rem;
    color: #00a082;
    display: block;
    font-size: 2rem;
    height: 3.5rem;
    line-height: 1.5;
    padding: 0.25rem 0.75rem;
    width: 100%;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

关于javascript - 选中时如何为选择及其下拉菜单设置CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52636781/

上一篇：html - 如何使textarea中的字体大小与CSS中的输入字段相同？

下一篇：html - 如何定位容器

相关文章：

javascript - 正则表达式 - 匹配重复模式

javascript - 添加指向动态 Canvas 的链接

html - BootStrap Carousel 旁边的列

html - 如何使每个部分的高度相同？

javascript - 如何动态循环 json 字符串中的所有值

JavaScript:在字符串中搜索字符串

javascript - Puppeteer 不会加载页面

jquery 绑定(bind) ('resize' ) 与 .resize() 之间的区别

javascript - 黑洞请求 Cakephp

javascript - 动画元素，但保持容器居中