css - 如何使用 css 修复自定义选择框？

Question

我正在尝试使用 CSS 修改默认选择框。我已经做到了。但是，Firefox 出现了一些问题。我现在所做的:

它在除 firefox 和 IE 之外的所有浏览器上都是完美的结果

在 firefox 中，存在以下问题:

(1)选择框右侧出现意外边框
(2) 选择框的文本填充比其他输入框大很多。

在 IE 上，同样的问题发生了。在选择框的右边有意想不到的清晰框:

如何从 Firefox 和 IE 中删除意外的行/框。另外，什么可能导致 firefox 的填充问题？

嗯，我用过this tutorial's concept仅使用 CSS 自定义选择框。我把我的代码放在

jsfiddle.net/w9kFc/1/

(我无法从外部链接在 jsfiddle 添加选择图标图像。所以，我在本地截取了屏幕截图。但是，我在 jsfiddle 代码中给出了 image's link。)

Answer 1

这似乎在 IE10 中有效:jsFiddle

在 select 周围添加了一个 label。将 text-indent 替换为 padding。