Adding Asterisk To Placeholder, Or A Nice Way To Mark Required Fields Via Placeholder
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
<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: '*';
}
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>
<input class='mandatory' type='text' placeholder='Username'>
</body>
</html>
Post a Comment for "Adding Asterisk To Placeholder, Or A Nice Way To Mark Required Fields Via Placeholder"