Question

I have an issue with Firefox when applying -moz-box-sizing : border-box; to inputs, seems like the text I type in is somewhere hidden or overflown or something.

You can see the issue in here : Test ( resize your window to a size smaller than 980px because it’s a mobile version );

So what could be the issue there ? Because I tried everything I could find, and the only thing that worked is removing the -moz-box-sizing : border-box; property (:

Answer 1

You should set the height to 100%. I tried the following CSS for your input fields, and it helped:

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

==> The reason is, that your padding of 20px is too much. Try first removing the padding. You will see that the input field’s text gets visible suddenly ;-). After I saw this, I set the height to 100%. Now you can decrease the padding to e.g. 10px and everything looks fine.