针对表单字段占位符属性中的特定字母答案

【问题标题】：Targeting a specific letter inside form field placeholder attribute针对表单字段占位符属性中的特定字母
【发布时间】：2015-08-18 02:20:28
【问题描述】：

我有诸如 <input type="text" placeholder="Name*"> 之类的表单字段。然后我将 CSS 应用于占位符，所以它是灰色的。但是，我想将星号（*）更改为红色。如何使用 jQuery 或 Javascript 仅针对属性内的一个字符？

【问题讨论】：

标签： javascript jquery css attributes placeholder

【解决方案1】：

你来为我工作

<!DOCTYPE html>

    <head>
      <meta charset="utf-8">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


      <style>
      input::-webkit-input-placeholder:after {
         content: '*'; color: red;
      }
      </style>
    </head>
    <body>
      <input type="text" placeholder="Name"></input>

    <script>

    </script>

    </body>
    </html>

【讨论】：

另见此处stackoverflow.com/questions/2610497/…

【解决方案2】：

所以 CSS 只有 ::first-letter 和 not ::last-letter 样式...要使 ::first-letter 适用于最后一个字母，您可以像这样改变文本的方向：

::-webkit-input-placeholder {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
::-webkit-input-placeholder::first-letter { /* WebKit browsers */
    color: red;
}

问题在于您需要反转占位符属性并且不能使用星号，因为这被认为是标点符号。但是你可以使用 unicode 字符:)...

<input type="text" placeholder="★ emaN">

这是 JSFiddle：http://jsfiddle.net/988aejrg/1/

【讨论】：