第一步，点击文本框，在属性栏中填写你需要的文字；见下图
第二步，为文本框文字添加css属性，点击文本框，可以在css面板中直接选择颜色或填写值；（可以在网页中直接定义css，也可以新建一个css文件）
显示效果
如果要实现鼠标点击灰色文字自动消失，需要使用js编程，可以在网上找js或jquery效果代码添加进页面内。
附上具体代码：
<!DOCTYPE html><html><head><style>.txt{ color:#ccc}.focus{ color:#333}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ var str="我是灰色文字" $(".txt").val(str) $(".txt").focus(function(){ var v=this.value if(v == str){ $(this).val("").addClass("focus") } }).blur(function(){ var v=this.value if(v == ""){ $(this).val(str).removeClass("focus") } })})</script></head><body><input class="txt" type="text" value="我是灰色文字"/></body></html><!DOCTYPE html><html>
<head>
<style>
.txt{
color:#ccc
}
.focus{
color:#333
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var str="我是灰色文字"
$(".txt").val(str)
$(".txt").focus(function(){
var v=this.value
if(v == str){
$(this).val("").addClass("focus")
}
}).blur(function(){
var v=this.value
if(v == ""){
$(this).val(str).removeClass("focus")
}
})
})
</script>
</head>
<body>
<input class="txt" type="text" value="我是灰色文字"/>
</body>
</html>
//本着严谨的思想，还是修改下
css设置文本框输入字体颜色：
直接设置placeholder的字体颜色为红色就行可以了。比如：
input{color:#fff}
input::-webkit-input-placeholder{color:#fff}
运行效果：
