在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

轉載于:https://www.cnblogs.com/gymmer/p/6883463.html

總結

以上是生活随笔為你收集整理的CSS/Compass修改placeholder的文字样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。