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

嘿我还发现，如果我将font-size: 0 px添加到div中 - 这也有效

选择具有来自div的额外顶部填充

2 个答案: