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

Question

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

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

你的邮件*

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

Answer 1

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