CSS, firefox input shows blank text

Asked

Viewed 420 times

3

In firefox my input text does not appear, what reason? see

http://jsfiddle.net/m8j873y8/

input {
    width: 100%;
    height: 35px;
    margin-bottom: 10px;
    color: #595959;
    padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    padding-left: 35px !important;
    box-sizing: border-box;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    overflow: auto;
    outline: 0px none;
    border: 2px solid blue;
    font-size: 15px;
    transition: border 0.5s ease 0s;
    opacity: 1;
}
html css css3

4 answers

4


Your problem, as stated by bfavaretto is the fact that you are telling the browser that the text box size should contain the padding and the border:

box-sizing: border-box;

This is causing the input get size 0 (zero):

Box Model

As it is without size, what is written does not appear in the same, despite being there:

Captura de tela

Animation of your input transiting from 35px height for 55px height making use of browser inspector.

Solution

Since you’re making use of the property box-sizing with the value border-box, you can remove the padding-top and the padding-bottom of input that you will get the same result with the text advantage being visible.

Like the height of your input is higher than indicated on the property height of the same, I also changed in the example the height of 35px for 38px:

inserir a descrição da imagem aqui

input.old {
    width: 100%;
    height: 35px;
    margin-bottom: 10px;
    color: #595959;
    padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    padding-left: 35px !important;
    box-sizing: border-box;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    overflow: auto;
    outline: 0px none;
    border: 2px solid blue;
    font-size: 15px;
    transition: border 0.5s ease 0s;
    opacity: 1;
}
input.new {
    width: 100%;
    height: 38px;
    margin-bottom: 10px;
    color: #595959;
    padding-right: 17px;
    padding-left: 35px !important;
    box-sizing: border-box;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    overflow: auto;
    outline: 0px none;
    border: 2px solid blue;
    font-size: 15px;
    transition: border 0.5s ease 0s;
    opacity: 1;
}
<input type="text" class="old" value="Bubu está escondido">
<br>    
<input type="text" class="new" value="Bubu está aqui!">

Also in the Jsfiddle.

  • Wow, that complex, did not know these rules, great explanation, Thank you!

  • Very well detailed Zuul, the animated image certainly explains very well the +1 problem

2

Firefox is respecting the box-sizing that you indicated. When you use border-box, the height of the element includes edges and padding. Technically you even exceeded the set height, and Firefox is cutting the inside of the element to respect the height you requested:

 17px de padding-top
 17px de padding-bottom
  2px de border-top
  2px de border-botom
-----------------------
 38px no total (mais que os 35 que você definiu!)

I do not know what is the final appearance desired, but the solutions are to change the box-sizing (or remove this property and use the default), change the height or reduce the paddings.

  • The explanation about the box-sizing is very correct, +1

1

The problem is in the use padding, when using it is as if you or it moves the text excessively out of the view area of the element itself

If you remove the padding-top and the padding-bottom the text will appear, follows an example commenting on the "paddings":

input {
    width: 100%;
    height: 35px;
    margin-bottom: 10px;
    color: #595959;
    /*padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;*/
    padding-left: 35px !important;
    box-sizing: border-box;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    overflow: auto;
    outline: 0px none;
    border: 2px solid blue;
    font-size: 15px;
    transition: border 0.5s ease 0s;
    opacity: 1;
}

Note: Not a good use padding-top and padding-bottom with a height fixed.

1

I just tested and it worked! Try this. . . 

input {
    width: 100%;
    height: 35px;
    margin-bottom: 10px;
    color: #595959;   
    box-sizing: border-box;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    overflow: auto;
    outline: 0px none;
    border: 2px solid blue;
    font-size: 15px;
    transition: border 0.5s ease 0s;
    opacity: 1;
}
<input type="text" value ="Hello World" >

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.