javascripthtmlcssrequired

How can show (*) besides the label only for input required..?

How can show (*) beside the label only for input required field..? required is not a class in my case..?

i have tried like this but not working

input[required] label:after { content:" (*)";color:red; }
<div>
    <label>Name:</label><br>
    <input type="text" name="name" required>
</div>
    

<br>

<div>
    <label>Address:</label><br>
    <input type="text" name="address" >
</div>

Solution

  • You can do that with jQuery so that you don't need to change your markup. So after the page loads you can do like this

    $('input[required]').prev('label').append('*');

    To be able to customize the asterisk you can do this:

    $('input[required]').prev('label').append('<font class="requiredAsterisk">*</font>');

/* And customize it in your CSS */
font.requiredAsterisk{
    color: red;
}