Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Placeholder

Adding Asterisk To Placeholder, Or A Nice Way To Mark Required Fields Via Placeholder

Post a Comment
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,

Solution 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

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

Solution 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

Solution 3:

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><inputclass='mandatory'type='text'placeholder='Username'></body></html>

https://jsfiddle.net/t7jnyqos/18/

Post a Comment for "Adding Asterisk To Placeholder, Or A Nice Way To Mark Required Fields Via Placeholder"