Ibn Ali al-Turki Ibn Ali al-Turki - 1 year ago 90
HTML Question

HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

How do I make a textbox that has a grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?


A "First Name" text box. The words "First Name" are inside the text box grayed out, when I click, those words disappear and I write my name in it.

Answer Source


<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />


function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }

Edit: this is actually easier.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download