Question

I am dynamically modifying a textfield using Javascript by adding some extra character (say X). For this I use:

document.forms['Form1'].elements['some_field'].value = document.forms['Form1'].elements['some_field'].value + "X";

But can I change the color of “X”? Like have it insert (say) a Red colored “X”.

Answer 1

You can use a contenteditable span and make it look like a text box.

HTML:

<span contenteditable="true" id="main"></span>

JavaScript:

document.getElementById("main").innerHTML += "<span style=\"color:red\">X</span>";

(optional) CSS Styling

#main {
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    height: 20px;
    width: 160px;
}

Demo: http://jsfiddle.net/TnUQW/