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上使用此下拉列表，需要使用自定义图标，这就是我隐藏默认下拉箭头图标的原因。

但是，当我隐藏图标时，select的位置会在firefox，chrome中稍微向上移动，即

如何制作标签并选择正确的位置？

Answer 1

在vertical-align: middle;班级

上试试这个.selectIcon

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

Answer 2

只需将vertical-align: middle;添加到css。{/ p>中的.selectIcon即可

Answer 3

您可以在标签上添加line-height：34px（与select的高度相同）。要使其工作，您还需要添加float：left和display：inline-block;

.customer_form label {
  width: 80px;
  margin-right:15px;
  font-weight: 700;
  font-size: 1em;
  float: left;
  line-height: 34px; 
  display: inline-block;
}


.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>

如何垂直对齐标签并选择？

3 个答案: