選擇具有div的額外頂部填充

Question

我想要一個帶有自定義箭頭的下拉菜單。
我做了一個帶有箭頭圖像背景的div包裝器，圍繞着我的選擇。

問題是選擇的div頂部填充了3-4個像素。 而且我找不到原因。

<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>

Answer 1

您可以嘗試：在此示例中，我使用的導航欄高度為50px，但是對於50，則可以使用自己的導航欄或父對象的高度。

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

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

Answer 2

嘿，我還發現，如果我向div添加font-size: 0 px ，那也可以