:: - webkit-input-placeholder не работает

Question

Я пишу мобильные веб-сайты, и я ухаживаю за ним.

Я хотел бы изменить цвет заполнителя textinput, но я не могу этого сделать.

Это Mixin для заполнителя

@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 установила ошибку на линиях mixins, которые говорят мне: «Неизвестный псевдосектор -webkit-input-placeholder» и хром, похоже, не распознают этот тег.

Как я могу изменить цвет заполнителя? Независимо от того, отвечает ли ответ в sass или css.

Заранее спасибо.

Answer 1

Вы не можете использовать его одного, только с селектором:

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

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

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

подмешать:

@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); 

Live example

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; 
}