How do you change the color of the intial text in a text field using CSS?

Question

And how do you make the text disappear when you click into the field and reappear when you click out of it?

Answer 1

do you just mean the color attribute for your first question? As for making the text disappear when you click into the field, do you mean an html input field?

If it is just a div, then setting an onmouseover and onmouseout event to hide the div (maybe use display:block and display:none) can accomplish that.

Answer 2

The color css property is used to set the text color. You can use a name value, rgb value, or hex value.

Changing the visibility of elements in reaction to events will required some javascript knowledge. You can use jQuery, which is a javascript library, to accomplish this. By toggling behaviors, you could make an element disappear and then reappear.

If you're wanting something like having default text in the textbox until the user focuses on that, you'll need to handle the focus and blur events. This posting has a tutorial on this.

Answer 3

CSS:

input.placeholder {
    color:#ccc;
}

JavaScript:

(function() {
    var placeholders = document.getElementsByClassName('placeholder');
    for(var p = 0; p < placeholders.length; p++) {
       var placeholder = placeholders[p];
       placeholder.onfocus = function() {
          this.value = '';
          this.removeClass('placeholder');
       };
       placeholder.onblur = function() {
          if(this.value == '') {
             this.addClass('placeholder');
          }
       }
    }
})();