input标签type属性,默认的字体颜色为灰色,当输入字时,字体为黑色

<div class="frame">
    <h3 class="text text-site">siteName:</h3>
    <input type="text" name="" class="input" style="color:gray" value="请输入网站名称" onfocus="if(this.value==‘请输入网站名称‘){this.value=‘‘};this.style.color=‘black‘;" onblur="if(this.value==‘‘||this.value==‘请输入网站名称‘){this.value=‘请输入网站名称‘;this.style.color=‘gray‘;}" />
</div>

<div class="frame">
    <h3 class="text text-site">siteUrl:</h3>
    <input type="text" name="" class="input" style="color:gray" value="请输入网站地址" onfocus="if(this.value==‘请输入网站地址‘){this.value=‘‘};this.style.color=‘black‘;" onblur="if(this.value==‘‘||this.value==‘请输入网站地址‘){this.value=‘请输入网站地址‘;this.style.color=‘gray‘;}"/>
</div>

以下两个效果,可一一尝试。

1、<input type="text" name="address" size="60" maxlength="60" style="color:gray" value="(测试)" onfocus="if(this.value==‘(测试)‘){this.value=‘‘};this.style.color=‘black‘;" onblur="if(this.value==‘‘||this.value==‘(测试)‘){this.value=‘(测试)‘;this.style.color=‘gray‘;}">

2、<input type="text" name="address" size="60" maxlength="60" style="color:gray" value="(测试)" onfocus="if(this.value==‘(测试)‘){this.value=‘‘};this.style.color=‘black‘;" onblur="if(this.value==‘‘||this.value==‘(测试)‘){this.value=‘(测试)‘};this.style.color=‘gray‘;">

HTML5新属性placeholder也可实现

<input type="text" name="first_name" placeholder="请输入文本..." />

用CSS美化placeholder(以下代码显示三种效果)

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

文章来自:http://www.cnblogs.com/fxqh/p/6483827.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3