css - 无法在 Scss 中设置占位符文本的样式

Question

我是 SCSS 的新手。我正在尝试将我的占位符文本设置为从浅灰色到深灰色。附上html代码:

 <div class="form-group">
     <textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)"placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours."title="Type your message" spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
     <span class="aria-hidden" id="typeYourMessage">Type your message</span>
 </div>

附上我的相关scss代码

 $darkgrey: #333333;
 textarea{
     @include placeholder
     {
       color: $darkgrey;
     }
 }

我想将占位符的颜色从灰色更改为深灰色。任何帮助将不胜感激。

Answer 1

/* cross browser way */

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
textarea::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
textarea:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
textarea:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

/* sass whould be like this */
/*
$darkgrey: #333333;
textarea{
  &::-webkit-input-placeholder {
    color: $darkgrey;
  }
  &::-moz-placeholder {
    color: $darkgrey;
  }
  &:-ms-input-placeholder {
    color: $darkgrey;
  }
  &:-moz-placeholder {
    color: $darkgrey;
  }
}
*/

<div class="form-group">
  <textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)" placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours." title="Type your message"
  spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
  <span class="aria-hidden" id="typeYourMessage">Type your message</span>
</div>

就拿这个并应用你的 sass 样式吧。