How can show (*) besides the label only for input required..?

Question

How can show (*) beside the label only for input required field..? required is not a class in my case..?

i have tried like this but not working

input[required] label:after { content:" (*)";color:red; }

<div>
    <label>Name:</label><br>
    <input type="text" name="name" required>
</div>
    

<br>

<div>
    <label>Address:</label><br>
    <input type="text" name="address" >
</div>

Why not just put (*) in your label? You can even put a span around it and style like you want. — manneJan89, Nov 02 '17 at 10:37
i have already built in code many places i cant keep `star` in so many pages so that is the reason I'm looking to append from CSS — Mr world wide, Nov 02 '17 at 10:38
your css selects a label that is the *child* of the input (ie the html of would have to be inside the input element). — TKoL, Nov 02 '17 at 10:38
Your current markup places the `input` after the `label` - you cannot target previous elements with CSS. You will need to change your HTML — sol, Nov 02 '17 at 10:41
@FastSnail input[required] works as well since it finds all the inputs with an attribute called required. — Luca De Nardi, Nov 02 '17 at 10:41
See [is there a previous sibling css selector](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — borisdiakur, Nov 02 '17 at 10:43
@AbdulWaheed you could also try to achieve the same with a Javascript/jQuery script that finds the required inputs and changes the labels so that you don't need to change your markup. — Luca De Nardi, Nov 02 '17 at 10:43

Luca De Nardi · Accepted Answer · 2017-11-02T11:01:18.047

3

You can do that with jQuery so that you don't need to change your markup. So after the page loads you can do like this

$('input[required]').prev('label').append('*');

To be able to customize the asterisk you can do this:

$('input[required]').prev('label').append('<font class="requiredAsterisk">*</font>');

/* And customize it in your CSS */
font.requiredAsterisk{
    color: red;
}

edited Nov 02 '17 at 11:01

answered Nov 02 '17 at 10:46

Luca De Nardi

2,280
16
35

Its awesome.! how can i give color to it.? – Mr world wide Nov 02 '17 at 10:58

score 1 · Answer 2 · edited Nov 02 '17 at 10:42

1

You could do something like this:

.wrapper > div{
  display: flex;
  flex-direction: column-reverse;
}

input:required + label::before{
  content: "* "
}

<div class="wrapper">
<div>
    <input type="text" name="name" required>
    <label>Name:</label><br>
</div>

<div>
    <input type="text" name="address" >
    <label>Address:</label><br>
</div>
</div>

http://jsfiddle.net/zbe1k4ay/

edited Nov 02 '17 at 10:42

priya_singh

2,478
1
14
32

answered Nov 02 '17 at 10:41

Kushtrim

1,899
6
14

2

Not sure if OP wants to alter the HTML? – sol Nov 02 '17 at 10:42
I don't think it would be possible otherwise using css only. – Kushtrim Nov 02 '17 at 10:46

ankita patel · Answer 3 · 2017-11-02T11:02:29.487

0

Try this.

jQuery("[required]").prev('label').append("<span>*</span>");

label{
  display:block;
}
label span{
  color:#ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label>Name:</label>
    <input type="text" name="name" required>
</div>
<br/>
<div>
    <label>Address:</label>
    <input type="text" name="address" >
</div>

edited Nov 02 '17 at 11:02

answered Nov 02 '17 at 10:53

ankita patel

4,201
1
13
28

How can show (*) besides the label only for input required..?

3 Answers3