CODEWITHSUNDEEP
angularjstwitter-bootstrapcsstwitter-bootstrap-3
Felix
Felix

Reputation: 10078

How to define CSS style for fields marked as required?

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

Upvotes: 11

Views: 6424

Answers (6)

thepio
thepio

Reputation: 6263

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.

Upvotes: 12

Saurav kr. Agrawal
Saurav kr. Agrawal

Reputation: 119

You can directly use

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

this input field will not accept null or empty string. if it will empty then input box border will appear in red color.

Upvotes: 1

Laiv
Laiv

Reputation: 316

I don't know if you are familiar with CSS3. In case you don't, just to say that a great feature of CSS3 are selectors. Something like jQuery selectors, but even better because there's no programming involved.

Here my page of reference, W3Schools - CSS Selectors.

Hope it will help you.

Note: W3Schools has many more contents related to web technologies. Page also applies the standards of the consortium W3C.

Upvotes: 0

AsgarAli
AsgarAli

Reputation: 2211

:required:not(.required) {
  background-color: #aca1e4;
}
<input type="text" class="required" required="required" />
<input type="text" required="required" />

:required

:not

Upvotes: 7

Mir
Mir

Reputation: 126

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

Upvotes: 3

Will B.
Will B.

Reputation: 21

You can use the :required pseudo-selector class.

Upvotes: 2

Related Questions