Question

我为文本框制作了一些CSS样式。

<div style="margin:10px">
<input type="text" value="Username" class="textbox3" onfocus="if(this.value=='Username')this.value=''" onblur="if(this.value=='')this.value='Username'">
</div>

和CSS

.textbox3{
    color:#202020;
    padding:0 5px 0 10px;
    font-family: 'Source Sans Pro', sans-serif;
    height:30px;
    font-size:13px;
    margin:0;
    outline:none;
    border:1px solid #dbdbdb;
    border-radius:3px;
    width: 150px;
}
.textbox3:focus{
    color:#202020;
    border:1px solid #4e8abf;
}
.textbox3:focus, .textbox3{
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

Jsfiddle：http://jsfiddle.net/AWmUg/

但文本的默认颜色为深灰色。我想将此默认文本“用户名”的颜色更改为更轻的颜色，如#cdcdcd，当我们键入任何其他文本时，它应该是深灰色。我怎样才能得到这个结果？

Answer 1

使用HTML5新placeholder属性，并使用专有样式为占位符和焦点不同的焦点设置不同的颜色

Demo

HTML

<input type="text" placeholder="Demo" />

CSS

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ff0000;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ff0000;
}

input:-ms-input-placeholder {
  color: #ff0000;
}

Answer 2

您可以使用HTML5 placeholder属性获得类似效果：

<input type="text" placeholder="Username"/>

在这个小提琴中看到它的实际效果：jsfiddle.net/3PLRA

此属性上有很多资源，包括如果浏览器不支持HTML5，如何提供JS fallback mehcanisms。

例如，为了设置placeholder属性的样式，请查看Change an input's HTML5 placeholder color with CSS。

.textbox3::-webkit-input-placeholder {
    color:    #F00;
}
.textbox3:-moz-placeholder {
    color:    #F00;
}
.textbox3:-ms-input-placeholder {
    color:    #F00;
}

请参阅此fiddle

中的示例

Answer 3

使用HTML5，您可以使用placeholder属性

有关详细信息，请参阅http://www.w3schools.com/tags/att_input_placeholder.asp。

支持HTML5的浏览器将为您完成此任务。

文本字段中的字体颜色更改

3 个答案: