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

Posted by Adam Butcher
.a{fill-rule:evenodd;}techdegree
Adam Butcher
Front End Web Development Techdegree Student 12,180 Points

How to make the placeholder text aligned right without anything else?

So I have this in my css code for project 3 of the front end degree.

input[placeholder]{ text-align:right; }

I added this so it will be left when I select the input.

input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; }

input:focus { text-align: left; }

But when I don't select the text, it goes back to right. I am not sure if there is a more efficient way to make the text in the textbox goes left.

I'm pretty much asking how to put the "required" placeholder right aligned without making the text itself right aligned after I inputted something. I want it to be in the left instead.

4 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

You might need JavaScript for this.

With JavaScript, you could create an event handler for input that would set the CSS to align right only when the input is empty (and thus showing the placeholder), and left otherwise.

Adam Butcher
.a{fill-rule:evenodd;}techdegree
Adam Butcher
Front End Web Development Techdegree Student 12,180 Points

I got it now. Thanks for the effort.

Rafael Castillo
seal-mask
.a{fill-rule:evenodd;}techdegree
Rafael Castillo
Front End Web Development Techdegree Student 10,301 Points
Rafael Castillo
.a{fill-rule:evenodd;}techdegree
Rafael Castillo
Front End Web Development Techdegree Student 10,301 Points

I know this is years later and my solution isn't very elegant but it gets the job done (except if the email address isn't formatted correctly, but what the hey):

input[placeholder]{ text-align:right; }

input[placeholder]: focus, input[placeholder]: active, input[placeholder]:valid { text-align: left; }

William Ma
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
William Ma
Front End Web Development Techdegree Graduate 12,958 Points
William Ma
.a{fill-rule:evenodd;}techdegree seal-36
William Ma
Front End Web Development Techdegree Graduate 12,958 Points

  1. make placeholder text align right: input[placeholder]{text-align:right;}

  2. make the input text align left when click it: input:focus{text-align:left;}