CSS, input in firefox shows blank text

Navigation
3

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

link 

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;
}
    
asked by anonymous 16.12.2014 / 21:11

4 answers

4

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

box-sizing: border-box;

This is causing input to be of size 0 (zero):

As it is without size, what is written does not appear in it, although it is there:

Animation of your input moving from 35px height to 55px height by using browser inspector

Solution

Since you are using the box-sizing property with the value border-box , you can remove the padding-top and the padding-bottom from the input you will get the same result with the advantage of the text being visible

As the height of your input is greater than that indicated in the height property of the same, I also changed in the example the height of 35px to 38px : 

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!">

Example also in JSFiddle .

    
16.12.2014 / 22:13
2

Firefox is respecting the box-sizing you indicated. When you use border-box , the height of the element includes borders and padding . Technically you have 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 the final appearance looks like, but the solutions are to change the box-sizing (or remove this property and use the default), change the height or reduce the paddings.

    
16.12.2014 / 21:15
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" >
    
16.12.2014 / 21:24
1

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

If you remove padding-top and padding-bottom the text will appear, here is an example commenting on "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: It is not good to use padding-top and padding-bottom with height fixed.

    
16.12.2014 / 21:15
How to show warning "Refresh your Browser" when it does not support HTML5? I can not get floats return by expressions