8

Preciso estilizar o texto que há dentro do select, como deixar centralizado, colocar margens. Estou colocando o nome da classe mais option e colocando o que desejo, porém não está funcionando. Fiz assim:

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

4

2 Respostas 2

5

Basta acrescentar no css:

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

No caso do text-align: center isso não funciona, para alinhar basta usar o padding-left. E nos options ele receberam a formatação do select porém ficarão com o seu tamanho e outros requisitos padronizados pelo navegador.

4
0

Para formatar um select não precisa de criar classes para cada uma delas, basta especificar a tag select ou option visto que elas têm inicio e fim em torno do conteúdo que se quer alterar. ex:. "< select > conteudo < / select> " o mesmo pode ser feito com uma 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;
} 

Observe como fica: http://jsfiddle.net/3AK7V/6/

2
  • Edilson, se eu fizer isso, todos os selects e options ocuparam essas regras, não? Commented 17/03/2014 às 0:27
  • Sim vão ser afectadas, até porque normalmente não se utiliza selects com mais de 1 tipo de estilização na mesma página por questão de estilo mesmo. Nota seste exemplo aqui, alterando apenas a primeira div para id="isto" e passando os parâmetros para o css #isto > select {} apenas o primeiro bloco é alterado, não sendo necessário a criação de várias classes: jsfiddle.net/3AK7V/7
    – Edilson
    Commented 17/03/2014 às 0:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .