Adding 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:

Your e-mail*

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

回答1:

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

回答2:

Better way is to keep the asterix in the placeholder as a fallback because this works in Webkit browsers only. So for other browsers your users don't know what field is mandatory.

Then you facing another problem - two asterixes in the placeholder. This can be fixed really easily by javascript.

I wrote an article about this: http://d.pr/1zQu

回答3:

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;"/>

回答4:

The simplest way i found was to give the input field a background image:

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

来源：https://stackoverflow.com/questions/14878812/adding-sup-asterisk-to-placeholder-or-a-nice-way-to-mark-required-fields-via

标签

html5