Html placeholder color - html

Question

<input type="text" placeholder="First Name *" />
How can I change the color of place holder differently like "First Name" in yellow and "*" in red.
Is it possible to do that?

Answer 1

You can change the color of the placeholder but I don't think you can add two colors in one placeholder. First, add a class name of input to the input element. Then add this css,
.input::placeholder {
color: red;
}

Answer 2

Inline elements such input do not support :before and :after. To make things even harder the placeholder selector and their pseudo-classes are not fully supported by all browsers.
input {
width: auto;
}
/* the negative of the input width */
input[required]+label {
color: #1b1b1b;
font-size: .7em;
position: relative;
left: -166px;
}
input[required]+label:after {
content: ' *';
color: red;
}
/* show the placeholder when input has no content */
input[required]:invalid+label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in it */
input[required]:valid+label {
display: none;
}
<form>
<input type="text" id="name" name="name" required="required" />
<label for="name">First Name</label>
</form>

Answer 3

You could use linear-gradient to do this, but this first approach wouldn't work with fluctuating length of placeholder text
input::placeholder {
background: linear-gradient(to right, gray 5em, red 5em);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
If your input text is right aligned, this would work with different lengths of content
input {
text-align: right;
}
input::placeholder {
background: linear-gradient(to left, red 5px, gray 1em);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}