参见英文答案 >
Concatenating nested classes using SASS 1个
我正在写一个移动网站,我正在用sass设计它.
我正在写一个移动网站,我正在用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);
附:不要一起使用它们(这个选择器坏了,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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。