css - 如何在 scss 中设置数据占位符属性的样式？

Question

我正在尝试在 SCSS 中设置数据占位符的样式。坦率地说，我想将数据占位符的颜色从现有颜色更改为深灰色。但是，我没有成功执行该操作。

附件是我的 HTML5 代码。

<optic-select-input id="placeholder" class = "dataplaceholder" data- 
 placeholder="Choose or type subject..."  title = "Type your subject"ng- 
 model="newMessage.Subject" data-maxlength="50"  spellcheck="true">

附件是我的 SCSS 代码。

    .dataplaceholder{
       @include placeholder(#A9A9A9,"");
         }


@mixin placeholder($color, $size:"") {
  &:-data-placeholder{
  color:$color !important;
  @if $size != "" {
  font-size: $size;
   }
   } 
   }

任何帮助将不胜感激。

Answer 1

添加方括号，如 [data-placeholder]。

@mixin placeholder($color, $size:"") {
  &[data-placeholder] {
     color:$color !important;

    @if $size != "" {
      font-size: $size;
     }
  } 
}

.dataplaceholder{
  @include placeholder(#A9A9A9,"");
}