change only the asterisk in placeholder to red

问题

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.

回答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>

来源：https://stackoverflow.com/questions/50429681/change-only-the-asterisk-in-placeholder-to-red