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;

参考：

Compass - CSS3 - User Interface

sass语法中的@content