SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    strange problem with font color in a text input placeholder text.....

    http://mayacove.com/dev/misc/form_test.html

    the boxes (which are text boxes with placeholder) should be color:#eee, instead I'm getting #666....

    for the second row of text boxes, just for testing, I set at the text color at red, which works fine, but when I set it to either #eee or #fff I get #666....

    WTF??

    ( color:#eee is working fine also for the checkbox labels... don't get what prob is for the text boxes....)

    would appreciate suggestions...

    thank you...

  2. #2
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are u using the placeholder css prefix?

    example:

    Code CSS:
    ::-webkit-input-placeholder {
       color: #eee;
    }
     
    :-moz-placeholder { /* Firefox 18- */
       color: #eee;  
    }
     
    ::-moz-placeholder {  /* Firefox 19+ */
       color: #eee;  
    }
     
    :-ms-input-placeholder {  
       color: #eee;  
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, it looks like you are confusing the color of the placeholder text (set by default by the browser) and the actual input text. To color the placeholder text, try ReGGaeBOSS' suggestion.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Ralph...

    yes I discovered this..

    Code:
    it-input-placeholder { color:#fff; }
    ::-moz-placeholder { color:#fff; } /* firefox 19+ */
    :-ms-input-placeholder { color:#fff; } /* ie */
    input:-moz-placeholder { color:#fff; }
    but even if I set it to white the placeholder text is darker...
    http://mayacove.com/dev/misc/form_test.html

    :-(

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your CSS isn't valid, you should have the same thing that ReGGaeBOSS posted apart from the colour being different.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    really?

    I got it from here,
    http://davidwalsh.name/html5-placeholder-css

    ok, copied code ReGGaeBOSS posted... this is my code now...

    Code:
    ::-webkit-input-placeholder {   color: #eee;}
    :-moz-placeholder {color: #eee;    }
    ::-moz-placeholder {    color: #eee;  }
    :-ms-input-placeholder {     color: #eee;  }
    it's still not working....:-(
    http://mayacove.com/dev/misc/form_test.html

    thank you...

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Its working fine for me in Chrome now, also when I said your CSS was invalid I was referring to what you had posted above and what was in your page source, in were missing the webk from the WebKit placeholder selector.

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yep... it's working now in Chrome... thank you....

    (but not FF... :-( )


    thank you......

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Didn't you want your place-holder text to be white not grey? Currently its #eee which is the opposite to what you originally had above.


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
  •