更改单个占位符字符颜色？答案

【问题标题】：Change a single placeholder character color?更改单个占位符字符颜色？
【发布时间】：2015-04-11 04:35:25
【问题描述】：

如果可能的话，无论如何要让这个脚本工作，我想在特定占位符的末尾添加一个红色 (*) 我尝试了 CSS :after 伪，它在 chrome 中运行得非常好。但我需要它跨浏览器。

我有一些 java 脚本，用红色（）替换任何（），但它在占位符中显示标签。

<head>
#inputFormBorder ::-webkit-input-placeholder:after {color:red;content:"*";}
#inputFormBorder ::-moz-placeholder:after {color:red;content:"*";}
#inputFormBorder :-ms-input-placeholder:after {color:red;content:"*";}

#inputFormBorder0 ::-webkit-input-placeholder:after {content:"";}
#inputFormBorder0 ::-moz-placeholder:after {content:"";}
#inputFormBorder0 :-ms-input-placeholder:after {content:"";}

input {width:300px;}
</head>
<body>
<h4>this only works in chrome</h4>
<div id="inputFormBorder">
    <input name="UserName" type="text" id="UserName" placeholder="User Name or Email">
   <div>

       <br><br>

<h4>cross browser?</h4>
<div id="inputFormBorder0">
    <input name="UserName" type="text" id="UserName" placeholder="User Name or Email*">
   <div>

  <br><br>

<div id="inputFormBorder">
    js turned this red *
   <div>

<script>
$('#inputFormBorder0').each(function () {
    $(this).html($(this).html().replace(/(\*)/g, '<span style="color: red;">*</span>'));
});
</script>
</body>

https://jsfiddle.net/zo16ruxd/15/

这个 jsfiddle 应该解释得更好。

谢谢！

【问题讨论】：

我认为目前还不可能。但是看看这个，它可能是一个你可以使用的解决方案：stackoverflow.com/a/15443126/663668
您正在尝试迭代 1 个 jQuery 元素（选择器正在寻找一个 ID）。 $('#inputFormBorder0').each(function ()。我认为最好的方法是添加一个类，例如：“必需”到所有需要红色 * 的输入文件。之后，遍历它们并append('<span style="color: red;">*</span>')

标签： javascript html css

【解决方案1】：

你的意思是这样的吗？ https://jsfiddle.net/zo16ruxd/17/ 如果是，为什么不使用<span>？

【讨论】：