text 使用此输入占位符SCSS Mixin更改占位符属性的颜色。添加背景颜色或只更改文本颜色

Posted 2021-05-02

<div class="card placeholder">
  <label>Label
    <input type="text" placeholder="placeholder mixin">
  </label>
</div>


@mixin placeholder() {
  input::-webkit-input-placeholder {@content}
  input:-moz-placeholder           {@content}
  input::-moz-placeholder          {@content}
  input:-ms-input-placeholder      {@content}
}

/* mixin usage */
.placeholder {
  @include placeholder {
    color: #0066CC;
    background: #ccffff;
  }
}

/* demo styles */
.card {
  width: 15em;
  margin: 2em auto;
  label {
    line-height: 2;
  }
  input {
    width: 100%;
    font-size: 1rem;
    padding: .5em .8em .7em;
    clear: left;
  }
}