Grow your CSS skills. Land your dream job.

Form input text color on blur

  • # August 15, 2012 at 2:30 pm

    I have a login form with placeholder text defined with a gray color. I would like when a user enters there name into the username input and then clicks the password input field to have the font color on the username switch back the the gray of the placeholder text. Is there a way to do this with only CSS or do I have to use Javascript?

    # August 15, 2012 at 2:46 pm

    You just need to set a color when the input field has focus.

    http://codepen.io/Paulie-D/pen/BIqFv

    # August 15, 2012 at 3:19 pm

    Thats what I have in place now. I would like the user entered text to remain the black as focus is changed to the next input to show that the user has filled that input.

    # August 16, 2012 at 4:56 am

    Aha…found what I was looking for:

    Search google and CSS-Tricks has the answer all along: http://css-tricks.com/snippets/css/style-placeholder-text/

    # August 16, 2012 at 6:41 pm

    Just set your placeholder color and your input color the same.

    http://codepen.io/death180/full/piFnu

    # August 17, 2012 at 4:15 am

    @death180 That’s not what he wants.

    He wants the placeholder to be ‘grey’
    A color for text being input (as it’s input)…can be any color
    A (possibly) third color (black) to show the entered text once the user moves on to the next box.

    Like this: http://codepen.io/Paulie-D/pen/asEiq

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".