Question

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

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

您的电子邮件*

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

Answer 1

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

Demo（我不确定其他语法，但我已经在webkit上测试过使用firefox＆lt; 17所以如果在任何浏览器中出现问题，请告诉我们）

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

Answer 2

更好的方法是将asterix作为后备保留在占位符中，因为这仅适用于Webkit浏览器。因此，对于其他浏览器，您的用户不知道哪些字段是强制性的。

然后你面临另一个问题 - 占位符中的两个星号。这可以通过javascript轻松修复。

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

Answer 3

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

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

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

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

将<sup>星号添加到占位符，或通过占位符</sup>标记所需字段的好方法

4 个答案: