CSS 选择框在 Chrome 上很好 在 Firefox 上不好

Question

我只是在尝试为 webkit 和 moz 浏览器设置选择框的样式，在 webkit 上它看起来很棒，但在 Firefox 中它看起来很糟糕，默认选项与选择框没有垂直对齐。

你能帮我找出这段代码有什么问题吗：

CSS：

select{
    min-width: 100%;
    width:inherit;
    background: #fff;
    height: 33px;
    border-radius:5px;
    font-size: 15px;
    border:none;
    box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
    padding:5px;
}

HTML

<select>
    <option>hey</option>
    <option>hey2</option>
    <option>hey3</option>

</select>

这是一个小提琴，你可以看到它在 Firefox 和 Chrome 上的外观：/难以置信！！

http://jsfiddle.net/wL8Rs/

我使用的是 Chrome 最新 34.0 版本和 Firefox 最新 29.0 版本

Answer 1

为选择添加填充

select{
     min-width: 100%;
     width:inherit;
     background: #fff;
     height: 33px;
     border-radius:5px;
     font-size: 15px;
     padding:5px;
     border:none;
     box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}

http://jsfiddle.net/wL8Rs/3/