How to add red asterisk sign to placeholder

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();

Leave a comment

Your email address will not be published. Required fields are marked *