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.

AFAIK, you can't partially change text color in a text field or a text area. You'll need to look into using contenteditable attribute and copy the contents from it to a text field to store value (like what most WYSIWYG editors do) — Ege Özcan, Apr 12 '12 at 06:57

Jukka K. Korpela · Answer 1 · 2012-04-12T07:36:33.367

1

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>

edited Apr 12 '12 at 07:36

answered Apr 12 '12 at 07:00

Jukka K. Korpela

195,524
37
270
390

2

thanks for quick reply. my designer gave me the design of page that contains this type of text fields as i mentioned above in my question.This was the new thing for me. :) – khurram Apr 12 '12 at 09:38

score 0 · Answer 2 · edited May 16 '12 at 10:02

0

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/

edited May 16 '12 at 10:02

Crab Bucket

6,219
8
38
73

answered Apr 12 '12 at 06:58

benni_mac_b

8,803
5
39
59

i want circle hover on my image. it is the image of resolution 230 x 231.when hover on image, it will be shown only circle part. how it will be? – khurram Apr 12 '12 at 12:21
Create a new question with your problem and the whole community will be able to offer help :) – benni_mac_b Apr 12 '12 at 12:38
i created the newer one but system told me that It does not meet our quality standards. :( – khurram Apr 12 '12 at 12:46
2

Don't let it put you off, try again including as much information & code as possible. Have a go at what you are trying to achieve and ask about the bits you are stuck on. Good Luck – benni_mac_b Apr 12 '12 at 14:31

score 0 · Answer 3 · answered Apr 12 '12 at 07:33

0

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/

answered Apr 12 '12 at 07:33

Rohit Azad Malik

31,410
17
69
97

ma ne kuch din howe join kiya he ye network. bhot achi site he ye. – khurram Apr 12 '12 at 13:02

score -1 · Accepted Answer · edited May 23 '17 at 11:58

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>

How to show multiple font colors inside the Text Field

4 Answers4