.customer_form label {
width: 80px;
margin-right: 15px;
font-weight: 700;
font-size: 1em;
}
.selectIcon {
border-radius: 6px;
height: 30px;
background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
background-position: 95% 50%;
display: inline-block;
width: 250px;
border: 2px solid #666666;
overflow: hidden;
}
#topGroup {
background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
background-position: 95% 50%;
width: 280px;
border: none;
margin-top: 5px;
padding-left: 5px;
-webkit-appearance: none;
}
#topGroup option {
padding-left: 5px;
}
<div class="customer_form">
<label for="topGroup">Category</label>
<div class="selectIcon">
<select id="topGroup">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
</div>
</div>
我在 IE8 上使用这个下拉菜单,需要使用自定义图标,这就是我隐藏默认下拉箭头图标的原因。
但是在firefox,chrome,ie中隐藏图标后select的位置会上移一点
我该怎么做才能使标签和选择位置正确?
最佳答案
在 .selectIcon
类上试试这个 vertical-align: middle;
.customer_form label {
width: 80px;
margin-right: 15px;
font-weight: 700;
font-size: 1em;
}
.selectIcon {
border-radius: 6px;
height: 30px;
background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
background-position: 95% 50%;
display: inline-block;
width: 250px;
border: 2px solid #666666;
overflow: hidden;
vertical-align: middle; //added
}
#topGroup {
background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
background-position: 95% 50%;
width: 280px;
border: none;
margin-top: 5px;
padding-left: 5px;
-webkit-appearance: none;
}
#topGroup option {
padding-left: 5px;
}
<div class="customer_form">
<label for="topGroup">Category</label>
<div class="selectIcon">
<select id="topGroup">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
</div>
</div>
关于html - 如何垂直对齐标签和选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32177433/