Select styling via CSS

Question

I need to stylize the text inside the select, how to leave centered, put margins. I’m putting the class name more option and putting what I desire, but it is not working. I did so:

HTML

<h3 class="imobBoxTipoTitulo">Tipo</h3>    
<div>
    <select class="imobBoxTipo">
       <option>Todos</option>
       <option>Teste1</option>
           <option>Teste2</option>
    </select>
</div>
<div class="clear"></div>
<div class="imobValor">
    <div class="imobValorEsq">
        <h3 class="imobBoxTipoTitulo">Valor</h3>
        <select class="imobBoxTipo imobBoxTipoValor">
           <option>De</option>
           <option>Teste1</option>
           <option>Teste2</option>
        </select>
    </div>
    <div class="imobValorDir">
        <select class="imobBoxTipo imobBoxTipo">
           <option>At&eacute;</option>
           <option>Teste1</option>
           <option>Teste2</option>
        </select>
    </div>
</div>

CSS

.imobBoxTipoTitulo{font-family: "Trebuchet MS", Helvetica, sans-serif;font-size: 9px;font-weight: bold;color:#b8b8b8;text-transform: uppercase;}

.imobBoxTipo{
    width: 220px;
    float: left;
   height: 34px;
   overflow: hidden;
   background: url(../images/arrow.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }
.imobBoxTipo select{
    width: 260px;
    margin-left: 16px;
    background-color: #f2f2f2;
    height: 38px;
    line-height: 38px;
    font-family: "Trebuchet MS", Helvetica, sans-serif!important;   
    color: #515151;
    font-size: 12px;
    background: transparent;
}
.imobBoxTipoValor{width: 110px;}

Jsfiddle

Answer 1

Just add in css:

select{
  width: 250px;
   height: 50px;
   font-size: 20px;
   background: #f2f2f3;
   padding-left: 100px
}

In the case of text-align: center this does not work, to align just use the padding-left. And us options they received the formatting of select but will be with its size and other requirements standardized by the browser.

Answer 2

To format a select you don’t need to create classes for each of them, just specify the select or option tag since they have start and end around the content you want to change. ex. " < select > content < / select> ", the same can be done with a tag "< p >< / p >".

select {
width:130px;
height:30px;
font-family:Verdana, Trebuchet,sans-serif;
font-size:14px;
padding:5px;
background-color:#45675D;
//Recomenda-se deixar essa linha de fora, porque a formatação a esquerta a justificada nos select fica melhor.
padding-left:40px;
}

option {
background-color:#45765D;
} 

Notice how it looks: http://jsfiddle.net/3AK7V/6/