I Want to Vertical-Align Text in Select Box

I want to vertical-align text in select box

Your best option will probably be to adjust the top padding & compare across browsers. It's not perfect, but I think it's as close as you can get.

padding-top:4px;

The amount of padding you need will depend on the font size.

Tip: If your font is set in px, set padding in px as well. If your font is set in em, set the padding in em too.

EDIT

These are the options I think you have, since vertical-align isn't consistant across the browsers.

A. Remove height attribute and let the browser handle it. This usually works the best for me.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

B. Add top-padding to push down the text. (Pushed down the arrow in some browsers)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

C. You can make the font larger to try and match the select height a little nicer.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

How to vertical-align label and select?

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>

CSS: Text inputs and select box vertical alignment

I've simly added class="mid" to <select /> and the css

.mid {
  text-indent: 50%;
}

This is how it looks till the end:

*, *::before, *::after {    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;}.row { display: flex; flex-direction: row; flex-wrap: wrap;}.col-6 { flex: 1;    -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;    padding: 0.5em;}hr { display: block; border: none; margin: 2em 0; clear: both;}
/* **** Start Form Elements **** */
.field-icon-append { position: relative;}.field-icon-append span { position: absolute; line-height: 1; top: 25%; right: 10px;  pointer-events: none;}.field-icon-append input, .field-icon-append select { padding-right: 30px;}input, select {    width: 100%;    border: 1px solid #acacac; min-height: 40px; color: inherit;    padding: 0.4em;    display: inline-block;    white-space: nowrap;    cursor: auto;}select {    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;}input.narrow, select.narrow { min-height: 30px;}
.mid {  text-indent: 50%;}

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0' type='text/css' media='all' />
<div class="row">
 <div class="col-6">    <div class="field-icon-append">     <span><i class="fa fa-search"></i></span>      <input type="text" name="EmailAddress" />
  </div>  </div> <!-- /.col-6 -->  <div class="col-6">    <div class="field-icon-append">      <span><i class="fa fa-chevron-down"></i></span>     <select class="mid">             <option value="1">First</option>             <option value="2">Second</option>             <option value="3">Third</option>             <option value="4">Fourth</option>         </select>
  </div>  </div> <!-- /.col-6 -->
</div> <!-- /.row -->
<hr />
<div class="row">
 <div class="col-6">    <div class="field-icon-append">     <span><i class="fa fa-search"></i></span>      <input type="text" name="Search" class="narrow" />
  </div>  </div> <!-- /.col-6 -->  <div class="col-6">    <div class="field-icon-append">      <span><i class="fa fa-chevron-down"></i></span>     <select class="narrow mid">             <option value="1">First</option>             <option value="2">Second</option>             <option value="3">Third</option>             <option value="4">Fourth</option>         </select>
  </div>  </div> <!-- /.col-6 -->
</div> <!-- /.row -->

How to align label and select box vertically (middle)

An easy way to do this is to give the label elements a line-height equal to that of the height of the dropdown selector. However, this solution depends on your labels only being a single line of text, if you have any labels that are multi-line it will not work and you should use the vertical-align method detailed above.

label {
    line-height:25px;
}

Updated JSFiddle

Vertical centering of text of select-element

After long trial&error and combining different answers from Stackoverflow, I've found a solution which is working for me on IE11, Edge, Chrome and FF.
All elements have the same height in all browsers. All elements use font-size from the parent element. Also no need for normalize.css or anything.
I've disabled the dropdown-arrow on select, but it's not affecting the result if enabled.
Only difference is on the text-indent at the select box. In IE11 and Edge, the text is starting with a small padding from left side. On Firefox I was able to solve the issue.

https://codepen.io/auskennfuchs/pen/xMqVgG

.formcontrol {
  font-size: inherit;
  padding: 0.5em 0;
  margin: 0;
  line-height: @form-height;
}

input, select, button {
  border: 0;  
  height: @form-height;
  box-sizing: content-box;
}

Of course the use of flexbox is much easier but there are some situation where flexbox isn't helping, e.g. 2 column responsive layout with form elements.

text vertical align in select box - firefox issue

You may try this

padding:.3em;/.4em;

depending on your configuration.

I Want to Vertical-Align Text in Select Box