Menu
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 (:
451
Note :- when using box-sizing : content-box; the content size remain same while border-box size grows as padding and border grow. but when using box-sizing: border-box; , the size of border-box remains same while size of content decreases as padding and border grow.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now! Hooray!
To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.
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.
101
I had this problem but initially in Safari 6+. Some text inputs respected padding top/bottom, but others didn't and ended up shorter. By using height: 100% on all of them as suggested here, they did all become consistent and seemed to respect padding top/bottom. However, it added a couple extra pixels in height.
In the end, I ended up doing box-sizing: content-box on all of them, which made them respect padding top/bottom but without the extra added pixels in height.
Had to chase this with a width: calc(100% - <padding L+R>) though, which is a disadvantage.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
