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

前端之家收集整理的这篇文章主要介绍了html – :: – webkit-input-placeholder不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > 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 class="input-class" ...>

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

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

提前致谢.

解决方法

您不能单独使用它,只能使用选择器:
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 here
input:-ms-input-placeholder,//Not IE will fails here
input::-moz-placeholder {//Not Firefox will fails here
    color: #9B9B9B;
}
原文链接:https://www.f2er.com/html/226709.html

猜你在找的HTML相关文章