Align text within <select> in Firefox

Question

I’m trying to line up the text inside a <select> but it is only aligned (by default) using Chrome and IE11 browsers (amazingly enough), only in FF(v27.0.1) that the text is at the top.

I’ve tried to use vertial-align:middle but it hasn’t changed at all.

I’d like it to be aligned vertically without using a padding-top for the element because the same disarray in other browsers.

HTML

<select name="disciplina" id="disciplina">
    <option value="00">Disciplina</option>
</select>

CSS

select {
    width: 200px;
    height: 38px;
}

Jsfiddle.

Answer 1

try using the padding-top and padding-bottom for example jsFiddle

CSS

select {
    padding-top:10px;
    padding-bottom:10px;
    width: 200px;
}

documentation: w3schools

Answer 2

I made an example at Jsfiddle:

HTML

<div class="styled-select">
   <select name="disciplina" id="disciplina">
      <option>Here is the first option</option>

   </select>
</div>

CSS

.styled-select select {
   background: transparent;
   width: 200px;
   padding: 5px;
   font-size: 14px;
   line-height: 1;
   border: 1px solid #CCC;
   border-radius: 0;
   height: 34px;

   }

I got the reference of this website.

Answer 3

You can also use this form and leave the text away from the left.

CSS

select {
    width: 200px;
    padding: 10px 10px 10px 40px;
}

or

select {
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
}

Observe: Jsfiddle