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/

Firefox中的CSS选择框很好

1 个答案: