input placeholder text and box-sizing: border-box
Hey guys,
I'm on a mac (10.9.3) running FireFox 30.
I have the old * { box-sizing: border-box; } trick implemented on my page. When doing so, my input placeholder text doesn't appear, but does in Chrome and Safari.
When I override the box-sizing on the input to content-box, the placeholder text appears.
I probably shouldn't share the url, but here you go: http://bluescape.jacobdubail.com/ Click the Search link in the nav to display the input.
Thanks, Jacob
الحل المُختار
That input has a starting rule of height:0px.
When you click the search button, the height remains zero with box-sizing:border-box but becomes 20px with box-sizing:content-box.
Is that because zero height is not allowed with content-box or because the script does something different in the two cases? Hmm...
Read this answer in context 👍 1All Replies (2)
الحل المُختار
That input has a starting rule of height:0px.
When you click the search button, the height remains zero with box-sizing:border-box but becomes 20px with box-sizing:content-box.
Is that because zero height is not allowed with content-box or because the script does something different in the two cases? Hmm...
Thanks jscher2000!
I was being daft. The padding and height: 20px was working in Chrome so didn't even think it could be an issue anywhere else ;) Set it to height: auto and tweaked the padding to match the desired spacing. Everything works great again and box-sizing wasn't the problem, I was.
-Jacob