CODEWITHSUNDEEP
css-selectorscss
Ted Bergeron
Ted Bergeron

Reputation: 471

CSS Selector for label bound to input

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.

Upvotes: 47

Views: 48123

Answers (6)

Mario Steinbacher
Mario Steinbacher

Reputation: 41

CSS Level 4 has the has selector which where you can select the wrapping element with a certain condition. In my example I used the required attribute on the input element as condition to add an asterisk after the label text.

div:has(input[required]) > label:after {
  content: "*";
 }
<div>
  <label for"testelement">Label</label>
  <input type="text" id="testelement" name="testelement" required>
</div>

Upvotes: 1

Tom
Tom

Reputation: 7091

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.

Upvotes: 9

Cristian Oana
Cristian Oana

Reputation: 1718

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;
}

Upvotes: 11

Umberto Babini
Umberto Babini

Reputation: 95

This solution works in most modern browsers:

label > input[required="required"] {
    background: red; 
}
<label for="myField"><input required="required" id="myField" /></label>

Upvotes: 7

Eymen
Eymen

Reputation: 175

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>

Upvotes: 0

mastaBlasta
mastaBlasta

Reputation: 5850

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');
});

Upvotes: 0

Related Questions