当每个元素的边框为 0px 且选择的边框为 1px 时，Firefox 下拉箭头答案

【问题标题】：Firefox dropdown arrows when border is 0px on each element and 1px on select当每个元素的边框为 0px 且选择的边框为 1px 时，Firefox 下拉箭头
【发布时间】：2014-06-19 23:42:47
【问题描述】：

我对使用以下 css 的 Firefox 有一个奇怪的问题：

* {
    margin: 0;
    padding: 0;
    border: 0;
}

select {
    border: 1px solid #A3A3A3;
}

在 chrome 中这表现正确：

但在 Firefox 中我得到了这个：

当我删除“border: 0”和“border: 1px solid #A3A3A3;”时属性，它工作正常：

关于如何在 chrome 和 firefox 上获得相同显示的任何建议？谢谢

【问题讨论】：

看这里stackoverflow.com/questions/6787667/…
我已经检查过这个。我不想删除箭头，我只想在屏幕截图中显示它们，在文本和箭头之间有一个填充
为什么不用自己的箭头来设计呢？
一本好书：The Problem Of CSS Form Elements
这可能会让生活更轻松：formalize.me

标签： html css google-chrome firefox select

【解决方案1】：

每个浏览器都有自己的css，我们必须根据你可以使用的浏览器设置一些css

-moz-appearance: none;

为此

【讨论】：

【解决方案2】：

我最终这样做了：

* {
    margin: 0;
    padding: 0;
}

并删除了这个属性：

select {
    border: 1px solid #A3A3A3;
}

通过这样做，每个元素的边框都由浏览器处理。如果我不需要元素的边框，我只需在其属性中添加“border: none”即可。

这个问题仍然悬而未决，因为这个解决方案并没有真正解决原来的问题。

【讨论】：