Adding ^{asterisk to placeholder, or a nice way to mark required fields via placeholder}

Question

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

Plain text like this in placeholder does not satisfy me:

Your e-mail*

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

Mr. Alien · Accepted Answer

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

zookastos · Answer

This should do the trick. You can go here to find any HTML Entity to add to your placeholder. Make sure your head has a meta tag which uses charset UTF-8.

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

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

Adding <sup> asterisk to placeholder, or a nice way to mark required fields via placeholder

Tags:

html

css

placeholder

Dan

2 Answers

Mr. Alien

zookastos

Recent Activity

Donate For Us