Avatar for Username

ძიება მხარდაჭერაში

ნუ გაებმებით თაღლითების მახეში მხარდაჭერის საიტზე. აქ არასდროს მოგთხოვენ სატელეფონო ნომერზე დარეკვას, შეტყობინების გამოგზავნას ან პირადი მონაცემების გაზიარებას. გთხოვთ, გვაცნობოთ რამე საეჭვოს შემჩნევისას „დარღვევაზე მოხსენების“ მეშვეობით.

Learn More

input placeholder text and box-sizing: border-box

  • 2 პასუხი
  • 1 მომხმარებელი წააწყდა მსგავს სიძნელეს
  • 34 ნახვა
  • ბოლოს გამოეხმაურა jacobdubail

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

გადაწყვეტა შერჩეულია

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

პასუხის ნახვა სრულად 👍 1

ყველა პასუხი (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