CSS/Compass修改placeholder的文字样式
在HTML5中，<input>与<textarea>标签支持placeholder属性，用来定义无任何输入时的默认文字。
可以通过CSS修改placeholder的文字样式：
input[type="text"]:-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="text"]::-webkit-input-placeholder {
color: #999999;
font-size: 14px;
}
如果使用Sass和Compass，可以更方便地设置placeholder的样式：
input[type="text"] {
@include input-placeholder {
color: #999999;
font-size: 14px;
}
}
其中，@mixin input-placeholder的源码如下：
@mixin input-placeholder {
@include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
@if $current-prefix == -webkit {
&::-webkit-input-placeholder {
@content;
}
}
@else if $current-prefix == -moz {
// for Firefox 19 and below
@if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
&:-moz-placeholder {
@content;
}
}
// for Firefox 20 and above
&::-moz-placeholder {
@content;
}
}
@else if $current-prefix == -ms {
&:-ms-input-placeholder {
@content;
}
}
}
// This is not standardized yet so no official selector is generated.
}
分析源码，可以知道Compass如何根据前缀实现webkit、firefox、IE的跨浏览器兼容，以及如何根据版本号实现firefox低版本的兼容。
其中有一项不常用到的技术为@content。@include input-placeholder在调用时，没有使用常见的(参数)方式，而是使用了{CSS 规则}方式。@content允许在@minxin中插入传入的CSS规则。就上例而言，为：
color: #999999;
font-size: 14px;
参考：
