使用CSS将'*'添加到具有'required'属性的输入字段标签中

Question

I am wondering if there is a way using only CSS to add an asterisk to a label element when the label's for attribute is for an input element with a required html attribute. Alternatively, we could use logic around if the label is directly followed by an input element which has the required attribute.

What does work is something like this:

 input[required] + label:after { content: '*'; color: red; } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

But what I'm talking about is if the label and input are swapped around like the example below, which is more common. The CSS sibling selector + doesn't work for this case. Is there any way to do some like above when the label element is first and the input is second?

 /* ??? */ 

 <form> <div> <label for="name">Name</label> <input id="name" type="text" required /> </div> <div> <label for="age">Age</label> <input id="age" type="text" /> </div> </form> 

Thanks

Answer 1

I suggest you keep old html and use css flex to order position

 input[required] + label:after { content: '*'; color: red; } div { display: flex; text-align: center; align-items: flex-start; } div input { width: 100px; height: 20px; order: 2; } div label { width: 100px; height: 20px; order: 1; } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

See the codepen

Answer 2

You can use float for label to positining label at left like below:

 label { float: left; } input[required] + label:after { content: '*'; color: red; } } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

Answer 3

There is no way for CSS to "render backwards" the way you want it too (not without SASS/SCSS).

One solution would be to add a "required" class to the labels that correspond to required fields.

<style>
    label.required:after { content: '*';color:red; }
</style>

<form>
  <div>
    <label for="name" class="required">Name</label>
    <input id="name" type="text" required />
  </div>
  <div>
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>
</form>

Another option is the use of CSS3 Orders property, but the parent element would need to be set to "display:flex".

<style>
    div { display:-webkit-flex;display:flex; }
    div label { order:1; }
    div input { order:2; }
    div input[required] + label:after { content: '*';color:red; }
</style>

<form>
  <div>
    <input id="name" type="text" required />
    <label for="name">Name</label>
  </div>
  <div>
    <input id="age" type="text" />
    <label for="age">Age</label>
  </div>
</form>

EDIT 6/25/2019 SASS/SCSS Example

div {
    display:-webkit-flex;
    display:flex;
    label {
        order:1;
    }
    input {
        order:2;
        &[required] + label:after {
            content: '*';color:red;
        }
    }
}

More information about Parent Selectors in SCSS.