How to define CSS style for fields marked as required?

Question

I have an application that is AngularJS and Bootstrap, although I am not sure if it is relevant. I want to define 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 doesn't have required class?

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

Update just to clarify - I want to style the field if it has "required" attribute regardless whether it has required class. My initial question could be interpreted that I want to style the element if it is required, but doesn't have required class. That's not the case. Sorry.

Also, 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 accomplished by input[:required] (that I didn't know about). I did try .form-group:required, but for some reason it doesn't do anything, although I see <div class="form-group" required="required"> in F12

Answer 1

If I understood you correctly it is possible like this.

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 the modified question:

Maybe this would 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's multiple possibilities and hopefully you can find the best that suites your needs.