Select Styling via CSS

Navigation
7

I need to stylize the text within select , such as leave centered, put margins. I am putting the name of the class plus option and putting what I want, 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

    
asked by anonymous 17.03.2014 / 00:04

2 answers

4

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, just use padding-left to align. And in the options it has been formatted as select but will remain with its size and other requirements standardized by the browser.

    
17.03.2014 / 00:50
0

To format a select you do not need to create classes for each of them, just specify the select tag or option as they have a beginning and an end around the content you want to change. ex:. 

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

See how it goes: link

    
17.03.2014 / 01:14
Is it efficient to check file modifications for Hash? How to support columns added by the user without updating the EF model?