在文本框中改變字體顏色

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屬性

見http://www.w3schools.com/tags/att_input_placeholder.asp獲取更多信息。

支持HTML5的瀏覽器會爲您做到這一點。

Answer 3

你可以使用HTML5 placeholder屬性達到類似的效果：

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

看到它在這個小提琴的動作：jsfiddle.net/3PLRA

有很多資源，在那裏此屬性包括如果瀏覽器不支持HTML5，如何提供JS fallback機器人。

爲了設計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