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

Question

我正在尝试在 SCSS 中设置 data-placeholder 的样式。

我想将 data-placeholder 的颜色从现有颜色更改为深灰色，但我的尝试没有成功，我错过了什么？代码如下

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,"");
}