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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

input placeholder text and box-sizing: border-box

  • 2 antwoorde
  • 1 het hierdie probleem
  • 1 view
  • Laaste antwoord deur 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

Gekose oplossing

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

Lees dié antwoord in konteks 👍 1

All Replies (2)

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

Gekose oplossing

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 Vraag-eienaar
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