文本字段中的字體顏色更改

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屬性，並使用專有樣式為占位符使用不同的顏色，並在焦點上和焦點外使用不同的顏色

演示

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后備機制。

為了給placeholder屬性設置樣式，例如，看看使用CSS更改輸入的HTML5占位符顏色 。

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

看這個小提琴中的例子

Answer 3

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

有關更多信息，請參見http://www.w3schools.com/tags/att_input_placeholder.asp 。

支持HTML5的瀏覽器將為您完成此操作。