如何使用CSS更改文本字段中初始文本的颜色？

Question

当你点击该字段时，如何使文本消失，当你点击它时再次出现？

Answer 1

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 2

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 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');
          }
       }
    }
})();