How to show multiple font colors inside the Text Field

Question

i want text inside the text field like "your name* "
the color of "your name" should be black and the color of * should be red.
how can i do this??

Please help me.

Answer 1

This is what i was asking here in question.
Multiple Colors Placeholder.
Answer Link Here

Some Trick here

.input-field {
    position: relative;
    display: inline-block;
}
.input-field > label {
    position: absolute;
    left: 0.5em;
    top: 50%;
    margin-top: -0.5em;
    opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
    display: none;
}
.input-field > label > span {
    letter-spacing: -2px;
}
.first-letter {
    color: red;
}
.second-letter {
    color: blue;

<div class="input-field">
    <input id="input-text-field" type="text"></input>
    <label for="input-text-field"> 
        <span class="first-letter">your name</span>  
        <span class="second-letter">*</span>
    </label>
</div>