1

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. Google Chrome Issues

Mozilla Firefox: Após inserir o "PADDING: 25px" o placeholder de TODOS os INPUTS desaparecem!! Mozilla Firefox Issues

Alguém tem alguma sugestão?

4
  • Caio, seria interessante poder inspecionar a pagina de seu projeto, se for possível, poste o link. Commented 25/11/2015 às 3:31
  • Upei o website no github caiodesign.github.io @devgaspa Obrigado pela atenção! Commented 25/11/2015 às 5:24
  • Caio, experimente acrescentar isso no seu .caio-input: height: inherit; e me diga o que acontece. O bootstrap tem um height: 34px; internamente, que está "segurando" o padding. Em princípio, o height: inherit; vai anular esse 34px.
    – Largato
    Commented 25/11/2015 às 6:49
  • @Bacco você é um gênio! obrigado pela atenção, um grande abraço! Commented 25/11/2015 às 7:11

2 Respostas 2

1

Na sua class .caio-input, você configurou um padding de 25px para todos os lados. Somando o padding-top e padding-bottom, seriam 50px de padding, ou seja, o placeholder está lá, porém, o padding está sobrepondo ele.

O normal seria o navegador aumentar o tamanho do input de forma que coubesse seu padding e o texto, placeholder no caso, no entanto, acredito que você definiu um height ou max-height nos inputs e por isso o navegador não consegue aumentar o tamanho deles.

Solução 1: remova o height / max-height dos campos input;

Solução 2: diminua os px do padding.

Até.

1

Com base na resposta do @bacco, através dos comentários :

.caio-input {
 height: inherit;
 }

O bootstrap tem um height: 34px; internamente, que está "segurando" o padding. Em princípio, o height: inherit; vai anular esse 34px.

2
  • Se deu certo, tá tudo certo. ;)
    – Largato
    Commented 25/11/2015 às 8:20
  • Caio, se puder, marque a resposta como aceita ( o ✅ verdinho ao lado da pontuação) para as pessoas saberem que resolveu, senão a pergunta é exibida como não resolvida na listagem.
    – Largato
    Commented 25/11/2015 às 8:38

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 .