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/