SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change font color when user clicks in input box

    Hi

    I have input on my web page that displays default text and clears this text once the user clicks in it.

    What I would like to do is have the default text that displays when the input doesn't have the focus to be a grey color
    and once the user clicks in the input the text colors to black.

    Where would I put this in this line?

    <input type="text" name="linkedin[]" size="20" maxlength="40" value="Add LinkedIn Link" onFocus="if(this.value == 'Add LinkedIn Link') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Add LinkedIn Link';}" />

    Thanks.

    Kath

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You'd do that in your css with something like this:

    Code:
    input[type='text']{color:#ccc;}
    input[type='text']:focus{color:#000}
    If you don't want it to affect all inputs then add a class to the inputs concerned.
    e.g.

    Code:
    <input class="highlight"  ...etc
    Code:
    input.highlight{color:#ccc;}
    input.highlight:focus{color:#000}
    In html5 you can use the placeholder attribute for safari and chrome and lose the inline javascript.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •