html – :: – webkit-input-placeholder不起作用

概述参见英文答案 > Concatenating nested classes using SASS                                     1个 我正在写一个移动网站,我正在用sass设计它. 我想更改textinput的占位符颜色,但我无法做到这一点. 这是占位符的mixin @mixin placeholder($color) { ::-webkit-inpu 参见英文答案 > Concatenating nested classes using SASS 1个
我正在写一个移动网站,我正在用sass设计它.

我想更改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  ...>

但没有任何反应.另外我的IDE在mixins行上设置了一个错误,说我：“未知的伪选择器-webkit-input-placeholder”和Chrome似乎无法识别该标记.

如何更改占位符的颜色？无论响应是sass还是CSS.

提前致谢.

@H_403_23@解决方法 您不能单独使用它,只能使用选择器：

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

附：不要一起使用它们(这个选择器坏了,CSS解析器总是会失败)：

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

@H_403_23@ @H_403_23@ 总结

以上是内存溢出为你收集整理的html – :: – webkit-input-placeholder不起作用全部内容，希望文章能够帮你解决html – :: – webkit-input-placeholder不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。