how to include css style to modify existing placeholder

Question

This question is very related with this one, but after reading and trying the different jsfiddles I cannot make it work in my case.

I have an existing source base which has bootstrap 2.3.1 and LESS. At the time being I cannot modify or recompile LESS, I can only modify existing HTML and use inline styles.

Is it possible to include this:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

In a simple input field with a placeholder like this:

<input id="some_id" placeholder="Lorem ipsum rocks da house!"/>

I've tried something similar to this jsfiddle with some success (I'm able to change font-size only) but I've read that bootstrap with LESS has a mixin for placeholder that I think is interfering with this method. Actually, if I refresh, I can see for a fraction of a second the style specified inline, but then suddenly changes to what I think is specified in that mixin.

Any ideas how to overcome this?

Thanks!

Abimbola Esuruoso · Accepted Answer · 2014-04-21T23:15:58.493

1

try adding the "!important" statement to all your rules... as shown below:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999 !important;
}

...that should force the browser to use those rules over the LESS mixins

edited Apr 21 '14 at 23:15

answered Apr 21 '14 at 22:54

Abimbola Esuruoso

3,955
1
19
25

Thank you Abimbola, and what about where to put this? Can it be placed as an inline style? – AlejandroVK Apr 22 '14 at 08:27
Yes, it can be...will work just the same. (Don't forget to accept this answer as the correct one! Cheers) – Abimbola Esuruoso Apr 26 '14 at 10:00
Hello Abimbola...Can you provide an example on how to include this inline? style=? I've tried all sort of combinations and none work – AlejandroVK Apr 26 '14 at 10:01
style="color:#999 !important;" is and example. if you a link to a jsFiddle, then post it in the comments, and I'll look and tell you what's blocking it, hopefully! – Abimbola Esuruoso Apr 26 '14 at 20:56

how to include css style to modify existing placeholder

1 Answers1