Firefox CSS 选择 OPTION 样式

Posted 2023-03-06

【中文标题】Firefox CSS 选择 OPTION 样式

【英文标题】：Firefox CSS select OPTION styling

【发布时间】：2013-03-27 03:48:13

【问题描述】：

据我所见，您无法设置框的样式，因为它是特定于操作系统的，除非您使用 javascript 进行编辑，否则无法破坏...

我的例子在这里：

http://www.promilitarybusinessnetwork.com/continueSearch.asp?categoryID=1270

我今天刚刚重新设计了页面。与以前相比有了巨大的改进。

在 Chrome 和 Safari 中看起来很完美……Firefox 给我带来了问题。

在 Firefox 中，文本不居中。 我不能使用 -moz-appearance:none;摆脱右边的盒子。 由于我的 chrome 和 safari 的 CSS，这些项目变成了白色。这仅适用于 SELECT 文本，但在我喜欢的浏览器中仍然保持黑色。在 Firefox 中，它会变成白色...

我能做些什么来改变这个...？

.select
width:361px;
height:44px;
color:#FFF;
font-size:14px;
padding-left:10px;
font-weight:bolder;
font-family:Verdana, Geneva, sans-serif;
background-image:url(images/baseselect_up.png);
display:block;
position:absolute;
-webkit-appearance: none;
-moz-appearance: none;

.select:hover
background-image:url(images/baseselector_down.png);


<form method="post" action="newSearch.asp">
<select class="select" name="baseID" >  

<% do while not BaseRs.eof %>
<option value="<%=baseRs("baseID")%>"><%=baseRs("base")%></option>
loop %>                                         
</select> <br><br>
<input type="hidden" name="CategoryID" value="<%=sqlFilter(request("categoryID"))%>">
<div style="position:relative; top:14px; left: 264px;"><input type="submit"     value="Continue >>>"></div>
</form>

有什么方法可以编辑 Mozilla 以使 OPTION 文本变为白色，并隐藏 SELECT 外观和中心文本...？

还是因为每个操作系统的运行方式我都搞砸了？

我在办公室运行 MAC，在家里运行 PC，所以我还没有在 PC 上看到我的网站，并在今天进行了这些新更改。

【参考方案1】：

SELECT/OPTION 的基于 JavaScript 的替换更加可靠和灵活，尤其是在您希望跨浏览器保持一致的情况下。你会发现有些事情是使用原生样式和标签无法做到的。

【讨论】：

好的，太好了！我很高兴有一个解决方案，尤其是在 javascript 中 - 我不知道如何硬编码！ :D 你有我可以用来帮助的资源吗？我在我的帖子之前看过几个，都没有帮助：/你知道什么有用吗？

有很多可供选择，不仅仅是这些：jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins

这些似乎都不适合我...我正在运行一个 asp 框架（虽然我没有制作它，我正在编辑它）所以也许它搞砸了？不可能......但我似乎无法让这些工作 O.o

万一有人来了，我推荐这个插件silviomoreto.github.io/bootstrap-select

【参考方案2】：

select
width:333px;
height:44px;
color:#FFF;

尝试以下选项颜色的答案

html <select> selected option background-color CSS style

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-multiple-option/

【讨论】：

我从未见过#remove - features O.o 表明我还有很多东西要学。让我尝试一下快速解决方案！编辑：没有工作。你在哪里看到这个作品，作为参考？也许它对另一个企业有用。

"#" 不是功能，它是来自海报的注释，如“删除那行代码”。

抱歉，我的回复太笨了！我认为这可能是一个我没见过的新功能，比如 webkit 之类的……我认为他没看错。我需要颜色：#fff 以保持选择颜色为白色，而不是黑色。问题是 Firefox 也将它用于选项。

【参考方案3】：

其实如果你不想使用额外的插件，最简单的方法就是使用这样的代码：

<label for="upload" class="upFile">Attach file</label>
<input style="display: none;" type="file" id="upload" accept="image/*" name="Change">

您可以删除内联 css ofc，也可以将标签样式设置为您想要的样子。