How to define CSS style for fields marked as required?

Question

I have an AngularJS and Bootstrap app, although I'm not sure if this is relevant. I want to define a CSS style for required fields. I see many examples if the field has class='required' , for example here :

 .form-group.required .control-label:after { content:"*"; color:red; } 

However, is it possible to do the same if the field has required='required' but does not have the required class?

Typically, I have a field that is conditionally required using ng-required='chkChecked' , and although I can add ng-class={'required': chkChecked} , I would prefer to avoid it if possible

Refresh for clarification only. I want to create a field if it has a required attribute, regardless of whether it has a required class. My initial question can be interpreted that I want to style an element if it is required, but does not have the required class. This is not true. Unfortunately.

In addition, I would prefer to put an asterisk on the label attached to the input field, rather than, say, a red border attached to the field itself (which can be done using input[:required] (which I did not know about). I tried .form-group:required , but for some reason does nothing, although I see <div class="form-group" required="required"> in F12

Answer 1

If I understood correctly, this is possible.

 input[required="required"]:not(.required) { border: 2px solid red; } 

 <input type="text" class="required" required="required"></input> <input type="text" required="required"></input> 

EDIT based on a modified question:

Perhaps this will be the answer you are looking for.

 .form-group[required="required"] input:not(.required) { border: 1px solid black; } .form-group[required="required"] input { border: 1px solid red; } .form-group[required="required"] label:after { content:" *"; color: red; } /* With only the required attribute */ .form-group[required] input { border: 1px solid red; } .form-group[required] label:after { content:" *"; color: red; } 

 <div class="form-group" required="required"> <label for="test1">Required</label> <input id="test1" type="text" required="required"></input> </div> <div class="form-group" required="required"> <label for="test2">Required</label> <input id="test2" type="text" class="required"></input> </div> <div class="form-group" required="required"> <label for="test3">Required</label> <input id="test3" type="text"></input> </div> <div class="form-group" required="required"> <label for="test4">Required</label> <input id="test4" type="text" class="required" required="required"></input> </div> <div class="form-group" required="required"> <label for="test5">Required</label> <input id="test5" type="text" class="required"></input> </div> <div class="form-group" required="required"> <label for="test6">Required</label> <input id="test6" type="text"></input> </div> <h5>With only required attribute as suggested in the comments for the possibility to help someone in the future</h5> <div class="form-group" required> <label for="test6">Required</label> <input id="test6" type="text"></input> </div> 

There are many possibilities and I hope you can find the best one that suits your needs.

Answer 2

 :required:not(.required) { background-color: #aca1e4; } 

 <input type="text" class="required" required="required" /> <input type="text" required="required" /> 

: required

: not

Answer 3

 .form-group .required { content:"*"; color:red; } 

Answer 4

You can use: the required pseudo selector class.

Answer 5

You can directly use

 <input type="text" id="name" class="form-control" required/> 

This input field does not accept an empty or empty string. if it is empty, the frame of the input window will appear in red.

Answer 6

I do not know if you are familiar with CSS3. If you don’t, just say that CSS3's great feature is its selector . Something like jQuery selectors, but even better, because there is no programming.

Here is my W3Schools link page - CSS Selector .

Hope this helps you.

Note. W3Schools has much more web technology related content. The page also applies the standards of the W3C consortium.