John Smith John Smith - 5 months ago 16
CSS Question

How to fix the center select text in a box?

I have this sample:

link

CODE HTML:

<div class="select-style6">
<select name="office" id="office">
<option value="0">Please select:</option>
<option value="9">oofffjjgh</option>
<option value="10">test</option>
<option value="11">test</option>
<option value="13">test</option>
</select>
</div>


CODE CSS:

.select-style6 {
background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
background-position: 149px center, center center;
background-repeat: no-repeat;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
overflow: hidden;
padding: 0;
width: 183px;
height: 33px;
}

.select-style6 select {
width: 100%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
line-height:normal;
}
.select-style6 select:focus {
outline: none;
}


I want to align the text to the center (vertically) on all browsers.

What is the best solution?

I tried to add
padding: 8px
but not okay, I want another method.

Can you please help me with a solution that would best work everywhere?

Thanks in advance!

Answer

Just remove the padding and set the line-height equal to it's height. Your welcome :)

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:33px;
}

Edit: Hi I just tested it in IE but unfortunately we cannot change the alignment of select in IE. As expected IE never fails us!

Comments