Use glyphicon to mark required field with css

Question

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:

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;
}

<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.

This was already answered here: [Add Bootstrap Glyphicon to Input Box](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box/18839305#18839305) — Carlos Man, Jan 28 '15 at 16:07
The whole question here is: "because it is *quite complicated*... we are trying something else". What was the complication that you are trying to avoid? — New Dev, Jan 28 '15 at 16:09
@CarlosMan: Thanks for the answer, but then I have to edit all my forms. With a CSS-Class it may be possible to add the * without editing all the forms. — waXve, Jan 28 '15 at 16:28
The answer reference above would work well for your use case if you make one of the options presented (***"With Bootstrap"***, for instance) into a directive that would produce the ***form-group*** for you. That way you get the best of both worlds. — Carlos Man, Jan 28 '15 at 16:32
@CarlosMan: Thats something I can think about, but I also have to edit all my forms. But if I chose the directive solution, how do I add the glyphicon only if the field is required? — waXve, Jan 28 '15 at 16:39
@NewDev We have some Fields that are requred and some that are not required. But in some cases the required Attribute is set by AngularJS, so I could not allwas add a hardcoded * to our Lables. So I want to do it via CSS to avoid to edit all my forms and to avoid the runtime of JS (wich might not be as much) — waXve, Jan 28 '15 at 16:41
Setting an attribute of the directive as a conditional and using said conditional in the ***ng-show*** or ***ng-if*** (depending on these templates being dinamically-compiled or not) of the tag containing your glyphicon or fontawesome icon ( or , etc.). — Carlos Man, Jan 28 '15 at 16:42
I will go with Carlos Man solution OR you can just make and actual markup of * then set displayt to none and for the css of the input try using a sibling selector "~" to trigger display: visible of asterisk when needed. (ie. input:required:invalid ~ .asterisk { display: visible };) — gsalisi, Jan 28 '15 at 16:46
I added a jsFiddle. I hope it helps... @gsalisi CarlosMan That is all something where I have to edit my Markup (which has a lot of input Fields). So that is only a fallback solutions, but it is one i can think about. — waXve, Jan 28 '15 at 17:04
possible duplicate of [Angularjs required asteriks](http://stackoverflow.com/questions/23275915/angularjs-required-asteriks) — KyleMit, Jan 28 '15 at 17:06

score 6 · Accepted Answer · edited May 23 '17 at 12:17

Option 1

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

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>");
        }
    };
});

.required {
  color: red;
}

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

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

Option 2

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

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

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

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"

Use glyphicon to mark required field with css

1 Answers1

Option 1

Option 2