選擇有額外的頂部填充div

我想要一個帶自定義箭頭的下拉菜單。
我在我的選擇周圍製作了一個帶有箭頭圖像背景的div包裝。選擇有額外的頂部填充div

問題是，選擇有3-4像素頂部填充從div。我找不到原因。

<style> 

    .styleSelect select { 
     font-weight:bold; 
     -moz-appearance:none; 
     -webkit-appearance: none; 
     border:none; 
     width: 140px; 
    } 

    .styleSelect select::-ms-expand { 
     display: none; 
    } 

    .styleSelect { 
     width: 120px; 
     overflow: hidden; 
     background: url("/Images/dropdown_arrow.gif") no-repeat right #fff; 
     border: 1px solid #000; 
     float: right; 
     margin-left: 3px; 
     border-radius: 8px; 
    } 

</style>

這裏是我的html：

<form> 
    <div class="styleSelect">  
     <select></select> 
    </div> 
</form>

來源

2015-04-27 Milka Salkova

邊界擴展元素。嘗試刪除vorder：1px solid＃000;或添加框大小：邊框 –

嘗試將「行高」設置爲導航欄的高度，並將「高度」設置爲導航欄的高度 – Vinc199789

您可以在[JSFiddle]中重現問題（ http://jsfiddle.net/）？ –

你可以試試這個：在這個例子中我使用50像素的導航欄高度，但對於50，你可以使用自己的導航欄或父對象高度。

.styleSelect select{ 
    line-height:50px; 
    height:50px; 
    /*and ofcourse your other code*/ 
}

這應該使對象垂直居中。您也可以嘗試vertical-align:middle;

來源

2015-04-27 08:52:56 Vinc199789

嘿，我還發現，如果我添加font-size: 0 px到div - 這也是工作

來源

2015-04-27 10:11:29

選擇有額外的頂部填充div

回答

相關問題