Geek asks and answers

Adding a <sup> asterisk to a placeholder or a good way to mark required fields with a placeholder

I am looking for a way to fine-tune an asterisk in a placeholder.

Plain text like this in the placeholder does not satisfy me:

Your e-mail *

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

+5
source share
3 answers

:afterIt works, but you need to target the placeholder, rather than the input element ... and then you can use the properties position: absolute;and top, leftto move you *to wherever you want ...

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

, Webkit. , .

- . javascript.

: http://d.pr/1zQu

+1

. , HTML- . , , UTF-8.

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

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

More articles:


All Articles