我们都知道输入框中改变默认显示的文字是通过改变 input 的 placeholder 来实现的 

1
<input type="search" placeholder="Search..." />

部分浏览器通过改变类似 -webkit-input-placeholder 的属性，使得输入框的 placeholder 也可以有自己的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
input {
    color: #fff
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;
} 
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ccc;
} 
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ccc;
} 
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #ccc;
}

大部分情况下修改的都是颜色，不过其它属性也是可以的 

1
2
3
4
5
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;
    font-size: 12px;
    text-align: right;
}