Add span inside form's placeholder

Question

I wanna add a color asterix in my form\'s placeholder, is it possible?

Answer 1

You can use pseudo elements in CSS (not supported in old browsers)

.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #ff0000;
}

<form>
  <p>
    <label for="input1">Input 1:</label>
    <input type="text" id="input1" placeholder="Fill input" class="mandatory" />
  </p>
  <p>
    <label for="input2">Input 2:</label>
    <input type="text" id="input2" placeholder="Fill input" />
  </p>
  <p>
    <label for="textarea">Input 2:</label>
    <textarea id="textarea" placeholder="Fill textarea"></textarea>
  </p>
</form>