placeholder字体颜色变化及onblur事件在input中的使用

1. css3中placeholder字体颜色的设置

   placeholder 默认字体为灰色，有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素；Mozilla Firefox 4-18使用伪类；Mozilla Firefox 19+ 使用伪元素；IE10使用伪类

   因浏览器的css选择器的差异，要做出单独的设定。

HTML
<input type = "text" class="h1" placeholder="username" />
<input type = "textarea" class="h1" placeholder="username" />

CSS
.h1{
    height:37px;
    border:0;
    color:#666;
    width:236px;
    font-size:16pt;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:#0000CD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#0000CD;

}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#0000CD;

}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#0000CD;
}

//or
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
　　color: #666;
　　}
　　input:-moz-placeholder, textarea:-moz-placeholder {
　　color:#666;
　　}
　　input::-moz-placeholder, textarea::-moz-placeholder {
　　color:#666;
　　}
　　input:-ms-input-placeholder, textarea:-ms-input-placeholder {
　　color:#666;
　　}

2.js onblur事件控制input框文字输入前后颜色的变化

<input type="text" name="address" style="color:gray" value="
test" onfocus="if(this.value=='test'){this.value=''};
this.style.color='black';" onblur="if(this.value==''||this.value=='test')
{this.value='test';this.style.color='gray';}">

3.input中placeholder，js的结合使用

<input type="password" placeholder="password" class="h2"
      onfocus="this.style.color='black';"/>

.h2{
    height:37px;
    border:0;
    color:#666;
    width:236px;
    font-size:16pt;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:#0000CD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#0000CD;

}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#0000CD;

}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#0000CD;
}

转载于:https://my.oschina.net/u/2460402/blog/511721