Subhajit Panja Subhajit Panja - 7 months ago 17
Javascript Question

Is it possible multiple text color in a single placeholder?

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

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

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

CSS

.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;
}

Working Fiddle