44

Is there a way in CSS to select labels bound to input fields (via the for attribute) having the required attribute set? Something like:

label:input[required] {
  ...
}

Currently, I'm adding class="required" to labels and inputs for styling. I now have the HTML5 attribute required="required" in the required input fields. It would be nice to remove the redundant class attributes.

The closest answer I found doesn't use the label element's for attribute, but would require that the label be directly adjacent to the input in the HTML.

Community
  • 1
  • 1
Ted Bergeron
  • 441
  • 1
  • 4
  • 4

5 Answers5

10

How about CSS 2 Attribute Selectors It is pretty compatible amongst browsers.

Example:

label[required=required] {
   color: blue;
}
<label required="required" for="one">Label:</label><input name="one" id="one" />

Also check this out.

Elikill58
  • 4,050
  • 24
  • 23
  • 45
Tom
  • 6,947
  • 7
  • 46
  • 76
  • 9
    Apparently questions and answers use formatting, but comments do not. The problem with that suggestion is that the required attribute belongs to the input element, not the label element. Also in the CSS, better off just saying: input[required] because the only valid markup is: HTML -> required XHTML -> required="required" required="false" or anything like that is not valid. – Ted Bergeron Jan 19 '10 at 05:08
  • Also see: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-required-attribute – Ted Bergeron Jan 19 '10 at 05:09
  • yeah, required=required is unnecessary. But if then he wants to be able to get all of the label tags attached to inputs that have the required attribute I don't think that is possible. You can get all the inputs @required `input[required]`, but not all the labels unless they are a child node of the input, which is incorrect even in HTML. – Tom Jan 22 '10 at 12:05
10

you can use label[for="title"] where "title" is the ID of your input. Example:

<label for="title">Title</label>
<input type="text" id="title" name="title">

css:

label[for="title"] {
  color: blue;
}
Elikill58
  • 4,050
  • 24
  • 23
  • 45
Cristian Oana
  • 1,688
  • 1
  • 11
  • 7
7

This solution works in most modern browsers:

label > input[required="required"] {
    background: red; 
}
<label for="myField"><input required="required" id="myField" /></label>
Elikill58
  • 4,050
  • 24
  • 23
  • 45
Umberto Babini
  • 95
  • 1
  • 2
  • 1
    I think the OP was asking for a selector that would generically apply to all required elements, to avoid specifying a selector for every element. – Don Spaulding Apr 30 '12 at 22:39
  • 2
    this doesn't work if you are using the recommended way of using label/input (not nesting them) – ashwoods Jul 11 '13 at 12:31
  • 3
    The other problem with this approach, or something that does `label + input[required]` is that you are styling the tag and not the – mastaBlasta Mar 19 '14 at 15:34
  • Labels are not required to be in any particular position in the dom relative to the input fields. They are coupled via the for attribute which binds to a unique id. A particular example is the use of radio buttons. Labels are typically placed on the right in that case. – Ted Bergeron Apr 03 '14 at 19:34
0

I don't think this can really be accomplished through CSS in the way that the OP wants. CSS just doesn't work that way.

A better approach in my opinion is to step back and look at the big picture. You have a form where some fields are required and some are not. It is a good approach to give the user all the required fields first, or group the required fields together, and keep them clearly separate from the optional fields.

You can create a structure such as

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

There are a number of benefits to this approach. You can add and remove items from the 'required' group easily without having to modify each one individually. You can assign the 'required' class as high up the chain as you want. If the form had the 'required' class, then everything in it would be labeled as required. There are fewer places to make changes, if you decided that the 'required' class should be called something else. And in general this approach also helps you organize your forms better. You should not intermingle required and optional fields.

You could take this a step further and have some javascript that will inject the required attribute into the input fields as well. 

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});
mastaBlasta
  • 5,700
  • 1
  • 24
  • 26
  • That is a rigid requirement and forces a particular design decision. Consider asking for a mailing address. We require address line 1, city, state, zip. You would move address line 2 out of the flow because it is optional? People are familiar with the structure of a mailing address and would want it structured in a standard way. – Ted Bergeron Apr 03 '14 at 19:32
  • In that case address line 2 is the exception, and as an exception it should get special treatment. Perhaps a class `.not_required` that disables the required style. `.required_fields label.not_required:after {content: ""}`. Seems like a perfect solution of going from the general to the more specific. – mastaBlasta Apr 03 '14 at 20:41
0

Well it's not possible in CSS (as I tried) you can easily do it in JS:

let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})


let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})
.required-input label::after {
  content: " *";
  color: red;
}
<div>
  <label for="user">Required</label>
  <input name="user" required/>
</div>
<br>
<div>
  <label for="user">not required</label>
  <input name="user" />
</div>
Eymen
  • 135
  • 9