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 - http://stackoverflow.com/questions/11197671/use-css-to-automatically-add-required-field-asterisk-to-form-inputs/11197803#11197803 — Paulie_D, May 27 '15 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, May 27 '15 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, May 27 '15 at 12:00

Douwe de Haan · Answer 1 · 2015-05-27T11:55:03.647

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 '15 at 11:55

answered May 27 '15 at 11:52

Douwe de Haan

6,247
1
30
45

score 0 · Answer 2 · answered May 27 '15 at 11:53

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 '15 at 11:53

Radonirina Maminiaina

6,958
4
33
60

Problem with your html approach is that * is displayed in next line – Tk1993 Sep 19 '17 at 07:24

score 0 · Answer 3 · answered May 27 '15 at 11:57

0

This is what you wanted DEMO

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

answered May 27 '15 at 11:57

Manwal

23,450
12
63
93

But in my case there is an another div inside the first one, so this is not working. – Sami May 27 '15 at 12:01

Adding asterisk after input field using Bootsrap 3 and AngularJS

3 Answers3