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>

Answer 2

You cannot; the value of a text input field is plain text.

Put the explanation, including the requiredness indicator if desired, in a label, not into the field. The you can use markup for the indicator, and color it:

<label for=name>Your name<span class=reqd>*</span>:</label>
<input id=name name=name size=40 required>

Answer 3

I think you should want this

CSS

label{
    color:black;
}
label  span {
    color:red;
}
input{
    line-height:25px;
    color:gray;
    font-size:16px;
}

input:focus{
color:black;
}

HTML

<label>
    Your Name:- <input type="text" value="your name"><span>*</span>
</label>

Live demo http://jsfiddle.net/rohitazad/dZmaZ/

Answer 4

You can't have different colours in one text box. (Reliably across browsers anyway)

The most common approach to this issue for required fields is to place the asterisk directly after the text box in an element with a class to set the text to red.

Example: http://jsfiddle.net/JzFd4/