我的Selectbox在浏览器上的不同输出

Question

我使用了基本风格的selectbox。虽然在safari和mozilla等不同的浏览器上看起来不同。

这是我的CSS：

.select { 
padding:7px; 
min-height:30px; 
background:#CCC;
border: 1px solid #7f7f7f;
border-radius: 4px;   
font-size: 13px; 
}

这是html

<select class="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

显示选择框是否有任何独特之处。我不想使用自定义jquery selectbox

Answer 1

我认为您已经不必要地使用了min-height。删除它并再次检查您的代码。

.select { 
padding:7px; 
background:#CCC;
border: 1px solid #7f7f7f;
border-radius: 4px;   
font-size: 13px; 
}

您可以根据所需的高度增加或减少填充。

Answer 2

Google首次搜索结果返回：

Fully custom select box, simple css only

我们的想法是将select包装在一个元素中，然后尽可能多地重置样式。所有浏览器都以不同的方式显示<select>。

<强> DEMO