如何设置选中下拉菜单时的CSS样式？

Question

如何设置选中下拉菜单时的CSS样式？

4

我是一名后端开发人员，正在学习前端，对CSS还不熟悉。

在一个项目中，需要为select标签设置默认的CSS样式。然而，在单击此标签时，边框颜色从绿色变为蓝色，文本颜色从绿色变为黑色。尝试查找实现单击事件的CSS，但无济于事。在检查元素中可见的只有某些事件在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');
});

如何在框在单击时更改边框颜色为蓝色，就像在标签中单击时一样，默认情况下这些更改都是蓝色的。例如评论、问题标题、问题主体和回答框在单击时都会更改边框颜色为蓝色，我不希望发生这种情况。

- NAVIN

请在您的CSS中查找:active选择器。 - Adrian Brand

请查看此链接：https://dev59.com/JnA75IYBdhLWcg3wVXav 底线是：无法样式化 <option>。 - user5734311

@HereticMonkey 这是一个不同的问题，我并非想要在“option”标签中添加CSS。请仔细阅读问题，我想要修改“select”标签和“select”下拉菜单，而非“options”。 - NAVIN

@HereticMonkey 我同意下拉菜单是浏览器功能，因此无法更改，但这不是唯一的问题。 - NAVIN

我已经阅读了你的内容，并且你特别提到了样式化select和option元素。然而，在你的编辑之后，似乎你并不是在谈论边框，而是关于outline属性。这个属性在所有可聚焦的元素上都是相同的：如何消除输入文本元素上的边框高亮。 - Heretic Monkey

4个回答

0

您可以使用CSS伪类为元素分配不同的值。

在您的情况下，您可以使用：

.customSelect:hover 来在鼠标悬停时分配样式。

.customSelect:active 来在点击某些内容后分配样式。

.customSelect:focus 来为键盘或鼠标激活的元素分配样式。

这将是与原始.customSelect不同的单独样式，如下所示：

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

.customSelect:hover {
  new-styles: new value;
}

你也可以将它们链接在一起：

.customSelect:hover, .customSelect:active {
  style-to-apply-to-both: value;
}

在这里了解更多关于选择器的知识：https://www.w3schools.com/cssref/sel_hover.asp

- Jake

0

有时候很难找到一些CSS，可以尝试使用:active或:hover等状态来检查元素。

- qiAlex

这是很好知道的。 - Hassan Voyeau

1

知道或不知道，这与问题无关。 - Lazar Ljubenović

这更适合作为对问题的评论，因为它并没有解决手头的问题。 - Jake

它确实与问题有关。 - Hassan Voyeau

0

你可能需要自己构建一个，因为访问选择元素的各个元素很复杂。我希望有人能提供更好的答案，但如果没有的话：W3 Schools有一个文档化的方法，它相当繁重。

https://www.w3schools.com/howto/howto_custom_select.asp

（抱歉关于链接的问题，已经编辑）

- AutoTurtle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NAVIN · Accepted Answer

我已经理解了。这个蓝色的颜色和对 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;
}