添加< sup>星号到占位符，或者通过占位符来标记必填字段的好方法 [英] Adding <sup> asterisk to placeholder, or a nice way to mark required fields via placeholder

问题描述

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

I'm looking for a way to style the asterisk in the placeholder.

占位符中的此类普通文字不满足我：

Plain text like this in placeholder does not satisfy me:

-mail *

Your e-mail*

请注意，占位符文本是变量，因此静态背景不会播放。

Note that the placeholder text is variable, so static background will not play the trick

推荐答案

：之后可以工作，但您需要定位占位符，而不是输入元素...，然后您可以使用 position：absolute; 和 top，left 属性来移动 code>您想要的任何地方...

:after works but you need to target the placeholder and not the input element...and then you can use position: absolute; and top, left properties to move your * anywhere you want to...

Demo （我不确定其他语法，但我已经测试webkit作为我使用firefox< 17，所以如果任何浏览器失败，请让我知道）

Demo (Am not sure about other syntax but I've tested on webkit as am using firefox < 17 so if something is failing in any browser please let me know)

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

这篇关于添加&lt; sup&gt;星号到占位符，或者通过占位符来标记必填字段的好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！