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