1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    35
    Vote Rating
    0
    Answers
    2
    ericchaves is on a distinguished road

      0  

    Default Unanswered: How can I change the color of a textfield placeholder

    Unanswered: How can I change the color of a textfield placeholder


    Hi,

    How can I set the color of a placeholder for a specific text input?

    Thanks in advance,

    Eric

  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    Answers
    20
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    Fire up your app in Chrome (or Safari if you like pain), right click over the top of your placeholder and choose "inspect element". The inspector will show all of the styles and classes applied to that particular element. Find the class hierarchy then override it in your own css. You might have to add "!important" at the end of your overrides to get it to work. Use this same technique anytime you're not offered a more convenient way to override such as a SASS mixin or config property.

    Hope that helps
    John

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    35
    Vote Rating
    0
    Answers
    2
    ericchaves is on a distinguished road

      0  

    Default


    Hi guys,

    After some googling I've found out how to do it. I'm using the following sass snippet to declare a placeholder-errror class and then I add it to the correspondent input text. Note that the class has to be added to the input text element so I couldn't use properties like cls of textfield component. I had to "manually" selecting the DOM element with aid of document.querySelector to pick the proper input text and then adding the class.

    It's also important to note that this feature won't work in all browsers.

    Code:
    $error-color: red;
    
    .placeholder-error {
        color: $error-color;
        &::-webkit-input-placeholder { color: $error-color; }
        &:-moz-placeholder { color: $error-color; }
        &:-ms-input-placeholder { color: $error-color; }
    }
    Cheers,

    Eric.

Thread Participants: 1

Tags for this Thread