在占位符中添加星号（*），或通过占位符标记必填字段的良好方式。

Question

在占位符中添加星号（*），或通过占位符标记必填字段的良好方式。

htmlcssplaceholder

8

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

像这样普通的占位符文本并不能满足我的要求：

您的电子邮件*

请注意，占位符文本是可变的，因此静态背景并不能解决问题。

- Dan

4个回答

3

这应该能解决问题。您可以在这里找到任何HTML实体，以添加到占位符中。请确保head标签包含使用字符集UTF-8的meta标签。

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

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

- zookastos

2

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

然后您面临另一个问题-占位符中有两个星号。这可以通过Javascript轻松解决。

我写了一篇关于这个问题的文章：http://d.pr/1zQu

- Johnny Vietnam

1

我发现最简单的方法是给输入字段添加背景图像：

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

- Manuel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

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

演示（我不确定其他语法是否有效，但我已在 Webkit 上进行了测试，因为我正在使用 Firefox <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: '*';
}