How to vertical-align label and select?

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>

I am using this dropdown on IE8 and need to use custom icon that is why I hidden default dropdown arrow icon.

However, when I hidden the icon the position of select will move up a little bit in firefox,chrome, ie

What can I do to make label and select have correct position?

Answer 1

Try This vertical-align: middle; on .selectIcon class

.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

just add vertical-align: middle; to your .selectIcon in css.