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

Targeting a specific letter inside form field placeholder attribute

本文关键字：属性 表单 字段 占位符      更新时间：2023-09-26

我有表单字段，如<input type="text" placeholder="Name*">。然后我有CSS应用到占位符，所以它是灰色的。但是，我想将星号(*)更改为红色。如何使用jQuery或Javascript瞄准属性中的一个字符?

这是我的作品 

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

所以CSS只有::first-letter和没有 ::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/

相关文章：