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?

Example:

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.

Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute

<input type="text" placeholder="First Name:" />

In order to get a more cross browser solution you'll need to use some javascript, there are plenty of pre-made solutions out there, though I don't know any off the top of my head.

http://www.w3schools.com/tags/att_input_placeholder.asp

This answer illustrates a pre-HTML5 approach. Please take a look at Psytronic's answer for a modern solution using the placeholder attribute.

---

HTML:

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

JavaScript:

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

With HTML5, you can do this natively with: <input name="first_name" placeholder="First Name">

This is not supported with all browsers though (IE)

This may work:

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">

Otherwise, if you are using jQuery, you can use .focus and .css to change the color.

If you're targeting HTML5 only you can use:

<input type="text" id="firstname" placeholder="First Name:" />

For non HTML5 browsers, I would build upon Floern's answer by using jQuery and make the javascript non-obtrusive. I would also use a class to define the blurred properties.

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

Functions:

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS:

.blurredDefaultText {
    color:#888 !important;
}

The shortest way is to directly add the below code as additional attributes in the input type that you want to change.

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

Please note: Change the text "Search" to "go" or any other text to suit your requirements.

This works:

<input type="text" id="firstname" placeholder="First Name" />

Note: You can change the placeholder, id and type value to "email" or whatever suits your need.

More details by W3Schools at:http://www.w3schools.com/tags/att_input_placeholder.asp

But by far the best solutions are by Floern and Vivek Mhatre ( edited by j0k )

I have a code snippet below, that is a typical web page.

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }

<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="[email protected]" />
  <p>Password:<input type="email" id="email" placeholder="[email protected]" />
  <br /><button class="submit">Submit</button>                 </center>
</div>

This is an elaborate version, to help you understand

function setVolatileBehavior(elem, onColor, offColor, promptText){ //changed spelling of function name to be the same as name used at invocation below
elem.addEventListener("change", function(){
	if (document.activeElement == elem && elem.value==promptText){
		elem.value='';
		elem.style.color = onColor;
	}
	else if (elem.value==''){
		elem.value=promptText;
		elem.style.color = offColor;
	}
});
elem.addEventListener("blur", function(){
	if (document.activeElement == elem && elem.value==promptText){
		elem.value='';
		elem.style.color = onColor;
	}
	else if (elem.value==''){
		elem.value=promptText;
		elem.style.color = offColor;
	}
});
elem.addEventListener("focus", function(){
	if (document.activeElement == elem && elem.value==promptText){
		elem.value='';
		elem.style.color = onColor;
	}
	else if (elem.value==''){
		elem.value=promptText;
		elem.style.color = offColor;
	}
});
elem.value=promptText;
elem.style.color=offColor;
}

Use like this:

setVolatileBehavior(document.getElementById('yourElementID'),'black','gray','Name');

You can use Floern's solution. You may also want to disable the input while you set the color to gray. http://www.w3schools.com/tags/att_input_disabled.asp

Here's a one-liner slim way for layering text on top of an input in jQuery using ES6 syntax.

$('.input-group > input').focus(e => $(e.currentTarget).parent().find('.placeholder').hide()).blur(e => { if (!$(e.currentTarget).val()) $(e.currentTarget).parent().find('.placeholder').show(); });

* {
  font-family: sans-serif;
}

.input-group {
  position: relative;
}

.input-group > input {
  width: 150px;
  padding: 10px 0px 10px 25px;
}

.input-group > .placeholder {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #929292;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <span class="placeholder">Username</span>
  <input>
</div>