如何为 chrome 中的选择控件选项应用 css 样式

Posted 2023-03-06

【中文标题】如何为 chrome 中的选择控件选项应用 css 样式

【英文标题】：How to apply css styles for select control options in chrome

【发布时间】：2016-04-14 03:12:07

【问题描述】：

我有一个带有一些选项的选择框，我需要应用特定于选择控件选项的样式。

我想要应用的样式是：

color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;

我已将 .taskpanel-select-control 类分配给我的选择控件， 并添加了css

.taskpanel-select-control option
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;

我的选择控件的 CSS 是： 边框半径：3px；边框：1px 实心#757575；-webkit-appearance：无； -moz 外观：无；外观：无；背景：url（images/caret_down.svg）不重复；背景重复：不重复；背景大小：1em；背景位置：96%；最小宽度：5em；高度：1.75em；填充左： 0.5em;padding-right: 2em;

但是这些在选择选项中没有得到尊重，有什么办法可以做到这一点。

Image of Select Box

【问题讨论】：

How to style the <option> with only CSS?的可能重复

只能用jquery来完成。在 google 上查找 jquery 选择选项样式插件。

我用过 -webkit-appearance:none; -moz 外观：无；外观：无；我的选择控件的样式，即使我面临这个问题

@SergeyDenisov，这个问题我只在 chrome 中遇到，它在 firefox 中工作。

我已经使用 bootstrap 下拉菜单解决了这个问题，我的问题快解决了，谢谢你的帮助。

【参考方案1】：

我想出了解决这个问题的办法。 在 chrome 中无法为选择选项应用 css 样式，而在 Firefox 中则可以。

为了使其在 firefox 和 chrome 中都能正常工作，我使用 ul 和 li 构建了 select 或 drop down。

通过它，我可以将我想要的任何样式应用于我的选择选项，这些选项不过是列表项 (li)。

发现这种方法存在一个问题，自动建议没有出现在我构造的下拉列表中，因为它是正常 html 选择框的默认行为。

【参考方案2】：

将样式应用于您的<options> 应该与应用于任何其他元素一样简单：

.taskpanel-select-control option 
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;


p 
font-weight: bold;

<p>&lt;select&gt; containing unstyled &lt;option&gt; elements:</p>

<select>
<option>Registration</option>	
<option>Completion</option>	
<option>State</option>	
<option>Archive</option>
</select>

<p>&lt;select&gt; containing styled &lt;option&gt; elements:</p>

<select class="taskpanel-select-control">
<option>Registration</option>	
<option>Completion</option>	
<option>State</option>	
<option>Archive</option>
</select>

【讨论】：

我找不到无样式选择框和样式选择的任何区别。

我使用的是 Firefox 43.0.4，所有样式都可以正常显示。你用的是什么浏览器？

我已经在 Firefox 中验证，我的 styes 工作正常，在 chrome 浏览器中出现问题。我使用的是 chrome 46

是的。我刚刚在 chrome 47 中对其进行了测试——你是对的，chrome 浏览器没有选择样式声明。

我已经使用 bootstrap 下拉菜单解决了这个问题，我的问题快解决了，谢谢你的帮助。