different text colors in placeholder

Question

Is it posible to make different text colors in placeholder: For example I wan't to make placeholder like:

 <input id="place" name="place" type="text" placeholder="" class="form-control input-md" required="">

   <script type="text/javascript">
                                var placeholder = "place for drilling <span>*</span>" ;
                                $('#place').attr('value', placeholder);

                                $('#place').focus(function () {
                                    if ($(this).val() === placeholder) {
                                        $(this).attr('value', '');
                                    }
                                });

                                $('#place').blur(function () {
                                    if ($(this).val() === '') {
                                        $(this).attr('value', placeholder);
                                    }
                                });
    </script>

Why i put this star in * tags because I wan't to make text black color and star red to show that this field is required. But i didn't find a way to put html in placeholder and my version is not working. you can see it on img enter image description here

So my complete question is: How to make different text color's in one placeholder??

Better practise would be to add the star after the input fields that are required. — Bram Vanroy, Mar 02 '15 at 22:15
See http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — ROMANIA_engineer, Mar 02 '15 at 22:18
I don't see there way to realize different color's in one placeholder. I know how to change text color. But how to mix different color's? — sanchahous, Mar 02 '15 at 22:22

score 1 · Answer 1 · answered Mar 03 '15 at 00:04

1

You can define in css like this and go from there

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

answered Mar 03 '15 at 00:04

Tremmillicious

454
4
14

the OP needs it in Jquery,bro - but nice attempts – Joe Kdw Mar 03 '15 at 00:49
This way I can change color for all text. What if I want to change only one letter color, so I need insert html to placeholder. – sanchahous Mar 03 '15 at 08:33

different text colors in placeholder

1 Answers1