javascript - Is it possible multiple text color in a single placeholder?

Question

I want a placeholder with multiple color text.Is it possible please help me.

I have a input text filed where placeholder showing I'm a good boy. I want good word different in color.

Answer 1

No, it is not possible to color the default placeholder but you can create a element similar to placeholder. So, that you can color the letters. This is a workaround to the default placeholder.

Note that I am using opacity: 0.5, you can change it as per your need.

---

HTML

.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;
}
.third-letter {
    color: orange;
}
.fourth-letter {
    color: green;
}
.fifth-letter {
    color: yellow;
}

    <div class="input-field">
        <input id="input-text-field" type="text"></input>
        <label for="input-text-field"> 
            <span class="first-letter">H</span>  
            <span class="second-letter">E</span>
            <span class="third-letter">L</span>
            <span class="fourth-letter">L</span>
            <span class="fifth-letter">O</span>
        </label>
    </div>