Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dev_study

Formatação tag select em formulários

Recommended Posts

Prezados, boa tarde.

Antes de qualquer coisa, gostaria de informar que estou iniciando os estudos em HTML e CSS.
Pois bem, há pouco, na tentativa de formatar um formulário, encontrei dificuldade em ajustar a altura de um campo do formulário.

Abaixo o trecho do código do formulário para melhor ilustrar a situação:

<div class="campo-form">
<label class="label" for="ano">Ano</label>
<select class="input1" name="ano" id="ano" placeholder="Até">
<option value=""></option>
<option value="1">2013</option>
<option value="2">2014</option>
<option value="3">2015</option>
</select>
<select class="input1" name="ano" id="ano" placeholder="De">
<option value=""></option>
<option value="1">2013</option>
<option value="2">2014</option>
<option value="3">2015</option>
</select>
</div>

No CSS, a classe input1, está com a configuração de altura para 20px, conforme segue.

.input1 {
float: right;
display: block;
width: 65px;
height: 20px;
border: 1px solid #A9A9A9;
border-radius: 5px;
margin-left: 20px;
}

Ocorre que a altura (height) não está sendo assumida de maneira correta. Esse tamanho parece estar sendo redimensionado automaticamente (não há outro local onde essa altura é tratada)

 

Já para outro trecho do formulário:

<div class="campo-form">
<label class="label" for="marca">Marca</label>
<input class="input1" type="text" name="marca" id="marca">
</div>

a altura é assumida corretamente.

 

Se ainda der para resumir, a diferença está que a primeira (que não funciona) trata-se de um select. Já a segunda (que funciona) trata-se de um input.

 

Aproveito ainda para questionar por qual motivo o atributo placeholder, no primeiro código acima também não está funcionando.

 

Agradeço a quem puder ajudar.

 

Diego

Compartilhar este post


Link para o post
Compartilhar em outros sites

1. Vc resetou margins/paddings?

tente assim:

.input1 {
padding: 0;
float: right;
display: block;
width: 65px;
height: 20px;
border: 1px solid #A9A9A9;
border-radius: 5px;
margin-left: 20px;
}
2. Não existe placeholder para a tag select.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá William, boa noite!

Agradeço pelo retorno.

 

Mesmo incluindo o padding, a altura do campo permaneceu incorreta.

 

Vou deixar a imagem do formulário no anexo, para tentar ilustrar um pouco mais o problema.

 

Untitled.jpg

 

Para o label 'Ano', a altura não está seguindo o padrão dos demais (mesma classe).

 

Att.,

Diego

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.