Olá, Estou com um problema muito bobo e simples que está me fazendo perder um P#@& tempo! vamos lá..
Estou utilizando o Bootstrap v3.3.6 CLASS="form-control"
Caso alguem queira fazer uma inspeção no website, upei ele incompleto mesmo no github: _http://caiodesign.github.io/#caio-contact
Tenho um formulário de contato bem simples:
.caio-input{
padding: 25px;
margin: 10px;
font-size: 17px;
border-radius: 10px;
}
<!-- Formulario de contato -->
<form action="contact.php">
<div class="col-md-offset-2 col-md-4">
<input id="nome" name="nome" type="text" placeholder="Seu Nome" class="form-control caio-input" required="">
</div>
<div class="col-md-4">
<input class="form-control caio-input" id="email" name="email" type="email" placeholder="Endereço de E-mail" required="">
</div>
<div class="col-md-offset-2 col-md-4">
<select class="form-control caio-input" id="valor" name="valor" >
<option value="" disabled selected style="display: none;">Selecione um valor</option>
<option value="Acima de $2,500">Acima de $2,500</option>
<option value="$2,500-$5,000">$2,500-$5,000</option>
<option value="$5,000-$25,000">$5,000-$25,000</option>
<option value="$25,000 pra Cima">$25,000 pra Cima</option>
<option value="Ainda estou pensando">Ainda estou pensando</option>
</select>
</div>
<div class="col-md-4">
<input id="cel" name="cel" type="text" placeholder="Seu Número de Telefone" class="form-control caio-input">
</div>
<div class="col-md-offset-2 col-md-8">
<textarea id="descricao" name="descricao" placeholder="Descreva seu projeto" class="form-control caio-input" rows="10"></textarea
</div>
<button class="col-md-8 ghost-button-thick-border-social-medias" style="width: 100%; margin: 10px; border-radius: 20px;">ENVIAR</button>
</form>
<!-- /Formulario de contato -->
Google Chrome: Após inserir o "PADDING: 25px" o placeholder do SELECT desaparece, parece que ele sobe pra fora do input.
Mozilla Firefox: Após inserir o "PADDING: 25px" o placeholder de TODOS os INPUTS desaparecem!!
Alguém tem alguma sugestão?
height: inherit;
e me diga o que acontece. O bootstrap tem umheight: 34px;
internamente, que está "segurando" o padding. Em princípio, oheight: inherit;
vai anular esse 34px.