Placeholder does not appear after applying "padding" in the input

Navigation
1

Hello, I am having a very silly and simple problem that is causing me to miss a P # @ & time! Come on ..

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

If someone wants to do an inspection on the website, it is incomplete even in 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 "PADDING: 25px" the SELECT placeholder disappears, it appears that it rises out of the input.

MozillaFirefox:Afterinserting"PADDING: 25px" the ALL placeholder the INPUTS disappear !!

Does anyone have any suggestions?

    
asked by anonymous 25.11.2015 / 04:17

2 answers

1

Based on @bacco's response, through comments: 

.caio-input {
 height: inherit;
 }

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

    
25.11.2015 / 08:12
1

In your class .caio-input , you have set% 25% x% to all sides. Adding padding and padding-top , would be 50px of padding, ie padding-bottom is there, however, padding is overlapping it.

The normal would be for the browser to increase the size of the placeholder so that it fits your padding and the text, placeholder in case, however, I believe you set a input or height in max-height and this the browser can not increase the size of them.

Solution 1: remove inputs / height from fields max-height ;

Solution 2: Decrease the px of input .

Until.

    
25.11.2015 / 05:51
Update in database in Visual Studio Character counter returning to the default value