[英]select has Extra top padding from div
I want a dropdown with custom arrow. 我想要一个带有自定义箭头的下拉菜单。
I have made a div wrapper with arrow image background around my select. 我做了一个带有箭头图像背景的div包装器,围绕着我的选择。
The problem is that the select has 3-4 pixels top padding from the div. 问题是选择的div顶部填充了3-4个像素。 And I can't find the reason. 而且我找不到原因。
<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>
Here is my html: 这是我的html:
<form>
<div class="styleSelect">
<select></select>
</div>
</form>
You can try this: For this example I use a navbar height of 50px but for the 50 you can use your own navbar or parent object height. 您可以尝试:在此示例中,我使用的导航栏高度为50px,但是对于50,则可以使用自己的导航栏或父对象的高度。
.styleSelect select{
line-height:50px;
height:50px;
/*and ofcourse your other code*/
}
This should center the object vertical. 这应该使对象垂直居中。 You can also try vertical-align:middle;
您也可以尝试vertical-align:middle;
嘿,我还发现,如果我向div添加font-size: 0 px
,那也可以
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.