4

Estou tentando alinhar o texto dentro de um <select> porém o mesmo só é alinhado(por padrão) utilizando os navegadores Chrome e IE11(por incrível que pareça), somente no FF(v27.0.1) que o texto fica no topo.

Já tentei utilizar vertial-align:middle mas não mudou em nada.

Gostaria que fosse alinhado verticalmente sem usar um padding-top para o elemento pois o mesmo desalinha nos outros navegadores.

HTML

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

CSS

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

JSFiddle.

2
  • realmente é complicado isso, se voce adicionar um padding fica desalinhado nos outros 7/03/2014 às 12:36
  • Realmente postei uma resposta com padding e não resolveu. Agora fiquei curioso com a solução 7/03/2014 às 12:39

3 Respostas 3

8

tente usando o padding-top e padding-bottom por exemplo jsFiddle

CSS

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

documentação: w3schools

7
  • Bom jovem, esta explícito que não pode ter um valor pre definido no padding-top, portanto sua resposta deve ser ajustada.
    – noNihongo
    7/03/2014 às 12:53
  • Sim, agora que você falou acabei de ver, é que ele fez a edição falando que não podia usar padding bem depois de eu ter enviado a resposta... Bom dia 7/03/2014 às 12:55
  • 1
    Sua resposta foi criada a 5 minutos e a edição a 16 minutos, portanto você estava ciente da edição ou não teve o trabalho de ler a necessidade do Alessandro Gomes, Jovem.
    – noNihongo
    7/03/2014 às 12:56
  • Eu gostaria de não depender do padding, porém neste formato que você passou eu não preciso calcular a altura para saber o padding top, só preciso dar o mesmo padding top e bot, por enquanto está é a solução para o meu caso, vou fazer mais alguns testes aqui e caso eu não ache uma solução sem padding, marco como resposta Ok. Valeeu 7/03/2014 às 12:57
  • 1
    @EduardoBentoRochaJunior eu não queria um top absoluto, porém da forma que ele passou, eu só preciso colocar o mesmo top e bot que o mesmo ficará sempre ao centro, sacou? Por isso que funcionou para mim.. 7/03/2014 às 14:34
4

Fiz um exemplo no 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;

   }

Peguei a referência deste site.

3
  • eu havia tentando fazer isso mas não tinha funcionado, mas a sua tentativa funcionou perfeitamente 7/03/2014 às 12:52
  • Que bom! tentei usar diversos métodos, porem esse foi o melhor.
    – dann
    7/03/2014 às 12:54
  • Dica: se você explicar porque seu código soluciona o problema e colocar links para documentação, as chances de ter a resposta aceita aumentam muito.
    – brasofilo
    13/05/2014 às 14:47
2

Você também pode usar desta formando e deixar o texto afastado da esquerda.

CSS

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

ou

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

Observe: JSFiddle

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 .