web-dev-qa-db-ja.com

::-webkit-input-placeholderが機能しない

私はモバイルウェブサイトを書いていて、それをsassでスタイリングしています。

Textinputのプレースホルダーの色を変更したいのですが、変更できません。

これはプレースホルダーのミックスインです

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

そして、私はそれをクラスに含めて使用します

.input-class {
    @include placeholder(#FFFFFF);
}

最後に、クラスを入力に設定します

<input class="input-class" ...>

しかし、何も起こりません。さらに、私のIDEは、ミックスイン行に「不明な疑似セレクター-webkit-input-placeholder」というエラーを設定し、chromeはそれを認識していないようです鬼ごっこ。

プレースホルダーの色を変更するにはどうすればよいですか？応答がsassまたはcssのどちらであるかは関係ありません。

前もって感謝します。

htmlcsssasswebkitplaceholder
10
guest9119

セレクターでのみ、単一で使用することはできません。

input::-webkit-input-placeholder {
    color: #9B9B9B;
}

input:-ms-input-placeholder {
    color: #9B9B9B;
}

input::-moz-placeholder {
    color: #9B9B9B;
}

Mixin：

@mixin placeholder($selector, $color) {
  #{$selector}::-webkit-input-placeholder {color: $color}
  #{$selector}::-moz-placeholder          {color: $color}
  #{$selector}:-ms-input-placeholder      {color: $color}
}

使用法：

@include placeholder('.input-class', #FFFFFF);

実例

P.S。それらをすべて一緒に使用しないでください（このセレクターは壊れており、cssパーサーは常に失敗します）：

input::-webkit-input-placeholder,//Not WebKit will fails here
input:-ms-input-placeholder,//Not IE will fails here
input::-moz-placeholder {//Not Firefox will fails here
    color: #9B9B9B;
}
32
Pinal