Scenario:
How to add a red asterisk sign to the placeholder.
Solution:
html:
<div class="form-group name-group">
<div class="palceholder">
<label for="name">Name</label>
<span class="star">*</span>
</div>
<input type="text" class="form-control" id="name" required>
</div>
css:
.form-group{
position: relative;
.palceholder{
position: absolute;
top: 7px;
left: 8px;
color: #B1B1B1;
display: none;
}
label{
font-wight: normal;
color: #B1B1B1;
}
.star{
color: red
}
}
javaScript
$('.palceholder').click(function() {
$(this).siblings('input').focus();
});
$('.form-control').focus(function() {
$(this).siblings('.palceholder').hide();
});
$('.form-control').blur(function() {
var $this = $(this);
if ($this.val().length == 0)
$(this).siblings('.palceholder').show();
});
$('.form-control').blur();