7

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

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

你的邮件*

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

4

4 回答 4

13

: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: '*';
}
于 2013-02-14T16:12:04.783 回答
2

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

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

<input type="text" id="email" class="form-control input-lg formData" placeholder="Your Email&#42;"/>
于 2016-09-28T04:53:49.940 回答
1

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

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

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

于 2015-03-06T19:41:13.967 回答
0

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

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

于 2018-08-27T14:56:56.080 回答