Adding asterisk after input field using Bootsrap 3 and AngularJS

Question

<div class="form-group form-group-lg">
    <label class="col-md-2 control-label">{{translation.FIRST_NAME}}:</label>
    <div class="col-md-10 required">
        <input type="text" name="firstName" class="form-control" ng-model="Addressid.nameFirst" ng-minlength="3" placeholder="First Name" required>
        <div ng-messages="rmaForm.firstName.$error">
            <div ng-message="required">
                Please enter your first name
            </div>
        </div>
    </div>
</div>

css

.required:after { content:" *"; }

Question

I know how to get asterisk after a label, but I want it to be after the Input fields. At the moment it is after the error message in second div. Is this possible with CSS to get it after a input field?

Possible duplicate - stackoverflow.com/questions/11197671/… — Paulie_D
– Paulie_D, Commented May 27, 2015 at 11:55
My problem is that there is another div inside the first div, so the asterisk goes after that and I don't want that. So partly this is duplicate, partly not. — Sami
– Sami, Commented May 27, 2015 at 11:59
That's why I linked it as a possible duplicate. If I'd actually voted to close it it would have been 'gold-badge hammered' and closed. — Paulie_D
– Paulie_D, Commented May 27, 2015 at 12:00

Radonirina Maminiaina · Accepted Answer · 2015-05-27 11:53:06Z

0

You can do this for example

.required:after {
  content: " *";
  position: absolute;
  top: 30px;
  left: 190px;
}

(demo)

Or you just add a new span after the input and put the asterix in:

<input type="text" name="firstName" class="form-control" ng-model="Addressid.nameFirst" ng-minlength="3" placeholder="First Name" required>
<span class="required-field">*</span>

answered May 27, 2015 at 11:53

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tk1993 Over a year ago

Problem with your html approach is that * is displayed in next line

Douwe de Haan · Accepted Answer · 2015-05-27 11:55:03Z

0

~~What about~~

~~.required input:after { content: " *"; }~~

Just realised you can't put an after on an input field. The best way would be a span, which could even be added by javascript on every .required field:

$('.required input').after('<span class="asterisk">*</span>');

This would automate the task, which could come in handy

edited May 27, 2015 at 11:55

answered May 27, 2015 at 11:52

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

Comments

Manwal · Accepted Answer · 2015-05-27 11:57:55Z

0

This is what you wanted DEMO

.required:after {
  content: " *";
  position: absolute;
  top: 0px;
  right: 6px;
}

answered May 27, 2015 at 11:57

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

1 Comment

Sami Over a year ago

But in my case there is an another div inside the first one, so this is not working.

Collectives™ on Stack Overflow

Adding asterisk after input field using Bootsrap 3 and AngularJS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related