Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Tim McMillan
Tim McMillan
10,191 Points
Posted by Tim McMillan
Tim McMillan
10,191 Points

placeholder text not centering

Hey guys, I'm working on a responsive form and i'm having problems with vertically centring the placeholder text on Android (testing on a Samsung Galaxy S3). Its working on Safari, Firefox and IE. I am centering by setting the height and line-height the same. Any help would be greatly appreciated. Here is a screenshot of the problem: http://mcmillanfreelance.ca/placeholderIssue.png Thanks guys!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

have you tried styling with these pseudo selectors 

::-webkit-input-placeholder {}
:-moz-placeholder {}
:-ms-input-placeholder {}

See this ccs-tricks post on styling placeholders here

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Also here is a simple pen it seems to do it by default codepen

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Rather than showing us a image of your issue, create a codepen and show us a live demonstration of your issue.

4 Answers

Tim McMillan
Tim McMillan
10,191 Points
Tim McMillan
Tim McMillan
10,191 Points

Thanks for the quick responses. I could use codepen, but the issue won't appear as the placeholder text vertically centers fine on desktop. The issue only seems to be on Android.

Here is the live site if that helps: http://mcmillanfreelance.ca/landingpage

I will try the pseudo selector to see if that has any effect.

// EDIT guess I should have used comment, not the answer

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Check out this article from the Treehouse blog on the CSS3 placeholder pseudo element

Tim McMillan
Tim McMillan
10,191 Points
Tim McMillan
Tim McMillan
10,191 Points

I checked out the blog post and tried the placeholder pseudo class but with no avail. I removed the line height declaration and only kept the height which seems to have fixed the issue and still works on Safari and Firefox (have not tested on IE or iPhone yet). I guess line-height is not required in input fields to vertically center text.

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

*Edit

height: 48px; line-height: 24px;

The text should be centered from what I see.