css - Ionic 4: Style input placeholder
问题描述
I'm trying to style the placeholder of my Ionic 4 application.The HTML looks as follows:
<form>
<ion-grid>
<ion-row class='label'>Name</ion-row>
<ion-row>
<ion-item>
<ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name'></ion-input>
</ion-item>
</ion-row>
<ion-row class='label'>Weight</ion-row>
<ion-row>
<ion-item>
<ion-input type='number' [(ngModel)]='recipe.weight' name='weight' placeholder='Weight'></ion-input>
<ion-label>kg</ion-label>
</ion-item>
</ion-row>
</ion-grid>
</form>
If tried out Ionic 2.x solutions yet it did not work out.
I've figured out that if you set a color in ion-item it styles the entire text of the input field
ion-item {
ion-input{
color:red;
}
}
when using the pseudo class :placeholder-shown or the pseudo element ::placeholder on ion-input though the styling shows no effect.
What am I doing wrong? Is there even a possibility in Ionic 4 to style input placeholder ?
Edit:
Stackblitz to fork with Ionic 4 and Angular 6
解决方案
使用此样式代码:
ion-input{
--placeholder-color: red;
--placeholder-opacity: 1;
}
推荐阅读
- cassandra - 如何为 CQLSH 中的任何列运行 SELECT DISTINCT?
- spring - 如何使用 Spring Boot 和 Maven 设置单独的单元测试框架
- java - 蓝牙 LeScan 没有达到目标
- angular - Angular 6 - httpClient 发布 XML 文件
- spring-boot - Spring Boot 2.0 WebClient 在继续之前处理 404
- javascript - 在元素中查找行,然后用标签包装它
- javascript - 如何计算 CheckSum 8 Xor
- macos - C++:无法读取 macOS 包中的资源文件
- python-3.6 - 将 Vertica 连接为 Django 后端
- android - MediaStore.ACTION_VIDEO_CAPTURE 从 Nohat 设备上的预览屏幕播放录制的视频时应用程序崩溃