Ionic+Angular中设置icon-input的placeholder颜色方法

2019-10-23 21:55:59
Ionic+Angular中,设置icon-input的placeholder的颜色的方法。

Ionic+Angular+Cordova图标

在前端开发中,我们会遇到给输入框的默认提示文字设置颜色的需求。

·传统设置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,这样颜色才能为真正的红色
}