占位符中的不同文本颜色

Question

在占位符中制作不同的文字颜色是否可行： 例如，我不想制作占位符，如：

 <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>

为什么我把这个星星放在*标签中，因为我不想将文字设为黑色，而是用红色显示该字段是必需的。但我没有找到一种方法将html放在占位符中，我的版本无效。你可以在img

上看到它

所以我完整的问题是： 如何在一个占位符中制作不同的文本颜色??

Answer 1

您可以像这样定义css并从那里开始

::-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;
}