在前端开发中,我们会遇到给输入框的默认提示文字设置颜色的需求。
·传统设置placeholoder的样式的方法:
input::placeholder {
//要设置的样式1
color: red;
}
//考虑兼容性,我们还可以使用私有属性:
input::-moz-placeholder {
}
input::-ms-placeholder {
}
input::-webkit-placeholder {
}
input::-o-placeholder {
}
然而这样设置,在Ionic4.X+Angular中是不生效的,因为Ionic赋予placeholder默认样式,并且Angular为每个组件内部的样式名都添加了[-ng-host]或[-ng-content]等类似的修饰,导致::placerholder这样的伪元素,被编译后,无法应用于输入框上。
·在Ionic4.X+Angular中设置placeholder的颜色的方法:
html:
<ion-input class="teh-input"></ion-input>
css:
.teh-input {
--placeholder-color: red;
--placeholder-opacity: 1;//别忘记把透明度设置为1,这样颜色才能为真正的红色
}