将 <sup> 星号添加到占位符，或通过占位符标记必填字段的好方法答案

【问题标题】：Adding <sup> asterisk to placeholder, or a nice way to mark required fields via placeholder将 <sup> 星号添加到占位符，或通过占位符标记必填字段的好方法
【发布时间】：2013-01-30 11:45:49
【问题描述】：

我正在寻找一种在占位符中设置星号样式的方法。

占位符中这样的纯文本不满足我：

您的电子邮件*

注意占位符文本是可变的，所以静态背景不会发挥作用

【问题讨论】：

标签： html css placeholder

【解决方案1】：

:after 有效，但您需要定位占位符而不是输入元素...然后您可以使用position: absolute; 和top, left 属性将您的* 移动到您想要的任何位置...

Demo（我不确定其他语法，但我已经在 webkit 上进行了测试，因为我使用的是 firefox

HTML

<input type="text" placeholder="E-Mail" />

CSS

::-webkit-input-placeholder:after {
   content: '*';
}

:-moz-placeholder:after { /* Firefox 18- */
   content: '*'; 
}

::-moz-placeholder:after {  /* Firefox 19+ */
   content: '*';
}

:-ms-input-placeholder:after {  
   content: '*';
}

【讨论】：

您有两个 -moz 声明，并且没有无前缀版本。另外：+1。
@DavidThomas double 冒号替换了 CSS3 中伪元素的 single-colon 选择器，以明确区分伪类和伪元素，因此声明两者;) 并且我不知道一般此版本，如果您知道，请随时编辑我的答案:)
@EugeneKrevenets 感谢您的通知，我回去工作后会看看 :)

【解决方案2】：

这应该可以解决问题。您可以go here 查找要添加到占位符的任何 HTML 实体。确保您的头部有一个使用字符集 UTF-8 的元标记。

<head>
    <meta charset="utf-8">
</head>

<input type="text" id="email" class="form-control input-lg formData" placeholder="Your Email&#42;"/>

【讨论】：

【解决方案3】：

更好的方法是将星号保留在占位符中作为备用，因为这仅适用于 Webkit 浏览器。因此，对于其他浏览器，您的用户不知道哪个字段是必填字段。

然后你面临另一个问题 - 占位符中有两个星号。这可以通过javascript很容易地修复。

我为此写了一篇文章：http://d.pr/1zQu

【讨论】：

【解决方案4】：

我发现的最简单的方法是给输入字段一个背景图片：

<!DOCTYPE html>
<html>
  <head>
    <style>
      input.mandatory {
        padding: 2px;
        height: 30px;
        width: 200px;
        background-image: url("http://www.fileformat.info/info/unicode/char/002a/asterisk.png");
        background-position: 160px -10px;
        background-repeat: no-repeat;
        background-size: 30%;
      }
      </style>
  </head>
  <body>
    <input class='mandatory' type='text' placeholder='Username'>
  </body>
</html>

https://jsfiddle.net/t7jnyqos/18/

【讨论】：