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

【问题标题】：How do you change the color of the initial text in a text field using CSS?如何使用 CSS 更改文本字段中初始文本的颜色？
【发布时间】：2010-09-12 05:25:28
【问题描述】：

以及如何使文本在您单击该字段时消失并在您单击该字段时重新出现？

【问题讨论】：

考虑提出这些单独的问题。
注意：只有当它是默认文本而不是用户已经开始输入的文本时，您才应该使文本消失！（如果用户输入前半部分然后做其他事情并再次关注输入文本，或者如果用户在提交输入之前再次关注以纠正错字）

标签： javascript css text textfield

【解决方案1】：

colorcss 属性用于设置文本颜色。您可以使用名称值、rgb 值或十六进制值。

更改元素的可见性以响应事件需要一些 JavaScript 知识。您可以使用 jQuery（一个 javascript 库）来完成此操作。通过toggling 行为，您可以使元素消失然后重新出现。

如果您希望在用户关注之前在文本框中保留默认文本，您需要处理焦点和模糊事件。这个posting 有一个教程。

【讨论】：

我尝试使用颜色 css 属性。不过，我似乎无法更改输入标签的 value="X" 内的文本 X。我应该如何调整我的 html 代码？

【解决方案2】：

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

【讨论】：

【解决方案3】：

您只是指第一个问题的颜色属性吗？至于让文本在单击字段时消失，您的意思是html输入字段吗？

如果只是一个 div，那么设置一个 onmouseover 和 onmouseout 事件来隐藏这个 div（可能使用 display:block 和 display:none）就可以做到。

【讨论】：

是的，颜色属性也就是文本的颜色。在你有 value="X" 的输入标签中，我想改变 X 的颜色。是的，一个 html 输入字段。