Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Echekwara usoro a. Biko jụọ ajụjụ ọhụrụ ma ọ bụrụ na ị chọrọ enyemaka.

input placeholder text and box-sizing: border-box

  • 2
  • 1 nwere nsogbu anwere nsogbu a
  • 1 view
  • Nzaghachi ikpeazụ nke jacobdubail

jacobdubail
jacobdubail
more options

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

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

Asịsa ahọpụtara

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...

Gụọ azịza a na nghọta 👍 1

All Replies (2)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

Asịsa Ahọpụtara

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...

jacobdubail
jacobdubail Jụọ onye nwe ya ajụjụ
more options

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