html - 如何垂直对齐标签和选择？

Question

.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的位置会上移一点

我该怎么做才能使标签和选择位置正确？

Answer 1

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