Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Ďalšie informácie

input placeholder text and box-sizing: border-box

  • 2 odpovede
  • 1 má tento problém
  • 1 zobrazenie
  • Posledná odpoveď od 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

Vybrané riešenie

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

Čítať túto odpoveď v kontexte 👍 1

Všetky odpovede (2)

more options

Vybrané riešenie

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

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