10

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

Community
  • 1
  • 1
Felix
  • 9,248
  • 10
  • 57
  • 89

6 Answers6

11

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.

thepio
  • 6,193
  • 5
  • 35
  • 54
  • From question it looks like OP is trying add the * symbol using `:after` element. If that is the case, this won't work. Pseudo-elements cannot be added to input elements. – Harry May 10 '16 at 06:11
  • @Harry you could be right. I just based my answer to this line "However, is it possible to do the same if the field has required='required', but doesn't have required class?". My snippet does the job for this, that's why I made my answer :) – thepio May 10 '16 at 06:15
  • @thepio - I realize that my initial question was somewhat misleading; I put an update. I think I can start from your answer, but if you have additional guidance - I would appreciate! – Felix May 10 '16 at 06:18
  • 1
    Ok I updated my answer and hopefully it's now what you need :) – thepio May 10 '16 at 06:22
  • 1
    @Felix: You don't really need to specify the attribute as `required=required`. It is a boolean property and just `required` is enough. e.g. `` or `
    `. You need to accommodate that as well, which `.form-group[required="required"]` selector will not cut. All you need is simply `div[required]` or `div.form-group[required]`. See here - https://jsfiddle.net/abhitalks/aa24x2eq/ and check how the last label doesn't get an asterisk.
     – Abhitalks May 10 '16 at 15:05
  • Thanks, @Abhitalks, you are correct. That said, AngularJS `ng-required` generates `required="required"`; but looks like both `.form-group[required="required"]` and `.form-group[required]` do what I want – Felix May 10 '16 at 15:10
  • Either way is good and I usually use only the required attribute on an input but in SO the answer always depends on the question. Of course recommending new ways and better ways to do things is always a nice thing :) – thepio May 10 '16 at 15:17
7

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

:required

:not

AsgarAli
  • 2,201
  • 1
  • 20
  • 32
  • it would be good, if you can add some description or explain the functionality – dreamweiver May 10 '16 at 06:13
  • 1
    external links should be included as a reference but the answer should have some basic information. just add explanation about the css selector and how it fixes OP's problem, it will help others in future as well. – dreamweiver May 10 '16 at 06:17
3
.form-group .required {
   content:"*";
   color:red;
}
Mir
  • 126
  • 5
2

You can use the :required pseudo-selector class.

Will B.
  • 21
  • 3
1

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.

Saurav kr. Agrawal
  • 119
  • 6
0

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.

Laiv
  • 306
  • 3
  • 21