Placeholder does not appear after applying "padding" to input

Question

Hello, I have a very silly and simple problem that is making me waste a P#@& time! come on..

I’m using the Bootstrap v3.3.6 CLASS="form-control"

In case someone wants to make an inspection on the website, then even incomplete on github: _http://caiodesign.github.io/#caio-contact

I have a very simple contact form:

.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: After inserting the "PADDING: 25px" the placeholder of the SELECT disappears, it seems that it rises out of the input.

Mozilla Firefox: After inserting the "PADDING: 25px" the placeholder ALL the INPUTS disappear!!

Does anyone have any suggestions?

Answer 1

In your class .caio-input, you set up a padding 25px on all sides. Adding the padding-top and padding-bottom, would be 50px padding, ie the placeholder is there, however, the padding is overlapping it.

Normally the browser would increase the size of the input so that fit your padding and the text, placeholder in the case, however, I believe that you defined a height or max-height us inputs and so the browser can not increase their size.

Solution 1: Remove the height / max-height of the fields input;

Solution 2: decrease the px of the padding.

Up until.

Answer 2

Based on the @Acco response, through the comments :

.caio-input {
 height: inherit;
 }

The bootstrap has a height: 34px; internally, which is "holding" the padding. In principle, the height: inherit; will override this 34px.