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样式应用到它。

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

1 个答案: