change only the asterisk in placeholder to red

Question

I am having trouble with a placeholder. I would like to change the color of the asterisk inside of the placeholder to red and leave the rest the dim black.

I am using bootstrap .form-control for markup.

I would like to know if there is a plugin/easy method of doing this. JS or CSS.

Hooman Bahreini · Accepted Answer · 2018-05-19T22:28:53.230

1

I don't know of any easy way to have 2 colors in a place holder.

You can try adding an asterisk after your placeholder using -webkit-input-placeholder::after, and change its color, but this solution does not work in all browsers: See here

You can try something like this and add your placeholder as a label...

input[required] + label {
    position: relative;
    left: -170px; /* move the label left and place it inside the input */
    color: #757575; /* placeholder color here */
}

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

<input type="text" id="myInput" name="myInput" required="required" />
<label for="myInput">IME IN PRIIMEK</label>

edited May 19 '18 at 22:28

answered May 19 '18 at 22:20

Hooman Bahreini

14,480
11
70
137

2

thanks for this! was hoping for a more solid option but this will do just fine! – Quade du Toit May 22 '18 at 08:36
1

Asterisk is not hidden while typing the content in text :( – Poonkodi Dec 02 '21 at 17:05

change only the asterisk in placeholder to red

1 Answers1

Linked