Align text within select in Firefox

Navigation
4

I'm trying to align the text inside a <select> but it's only aligned (by default) using Chrome and IE11 browsers (as it may seem), only in FF (v27.0.1) that the text stays in top.

I have tried to use vertial-align:middle but it has not changed at all.

I would like it to be vertically aligned without using a padding-top for the element because it would be out of line in other browsers.

HTML 

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

CSS 

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

JSFiddle .

    
asked by anonymous 07.03.2014 / 13:18

3 answers

8

Try using padding-top and padding-bottom for example jsFiddle

CSS 

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

documentation: w3schools

    
07.03.2014 / 13:49
4

I've done an example in 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've taken the reference from this site .

    
07.03.2014 / 13:49
2

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;
}

Please note: JSFiddle

    
07.03.2014 / 14:54
Is it possible to define a class within an array in earlier versions of PHP 7? Constructing SQL tables - using or not fields with Not Null?