In our Angularjs Application, we set the required Fields dynamically (ng-required). Therefore it is a quite complicated to add an * to the label every time it is required.

Now we have another idea. It may be possible to mark the input-field itself as required. In this post, we found a part of the solution.

There were CSS-Selectors for a required field, so we can set a Background-Image for that like this:

<!-- language: lang-css -->

input:required:valid {
  background-image: url(valid.png);
  background-position: right center;
  background-repeat: no-repeat;
}
input:required:invalid {
  background-image: url(invalid.png);
  background-position: right center;
  background-repeat: no-repeat;
  -moz-box-shadow: none;
}

<!-- language: lang-html -->

<p>Name:</p>
<input type="text" name="name" required />

But using that way, we need a background image of an *, And this seems to be very hacky. Especially, if there are different Sizes of the form, so the Image has different resolutions.

Than we found this (Section Labeled) example and it seems to be possible to add Text to the input field.

So the question is, how can I put that all together, so that I can put an glyphicon from twitter-bootstrap to the right side of an input field, if that is required without editing all my forms?

Hers a jsFiddle. That might work, but the problem is, that background-size is not supported everywhere.

Option 1

As mentioned in Angularjs required asterisks, you can add a directive for the required attribute like this:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

var app = angular.module('stack', []);

app.directive("required", function() {
    return {
        restrict: 'A', // only for attributes
        compile: function(element) {
            // insert asterisk after elment 
            element.after("<span class='required'>*</span>");
        }
    };
});

<!-- language: lang-css -->

.required {
  color: red;
}

<!-- language: lang-html -->

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">
  
  <input type="text" required />
  
</div>

<!-- end snippet -->

Option 2

As mentioned in Use CSS to automatically add 'required field' asterisk to form inputs, using background image is perfectly fine also:

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

input[required], 
select[required]{
    background-image: url('http://i.imgur.com/zEIWMh4.png');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 45px;
}

<!-- language: lang-html -->

<label>Name</label>
<input type="text" required /><br/>

<!-- end snippet -->

Note: You cannot use input:after to create a pseudo element after input because :before and :after "are rendered are within the container itself as a child element and input can not contain other elements hence it's not supported"