离子2占位符文本样式 [英] Ionic 2 placeholder text styling

问题描述

我正在使用Ionic 2 rc0开发一个应用程序，并且在整个应用程序中有几个仍需要样式的输入字段。

I am working on an application using Ionic 2 rc0 and have several input fields throughout the application that still need styling.

<ion-item class="su-p3-item">
  <ion-label floating class="su-input">Your name</ion-label>
  <ion-input type="text" class="su-input"></ion-input>
</ion-item>

离子2输入api http://ionicframework.com/docs/v2/api/components/input/Input/

具体来说，我需要在活动时更改占位符文本的样式和底部边框。通过API，并提供了SASS变量覆盖，我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式。

Specifically, I need to change the styling of the placeholder text, and bottom-border when active. Through the API, and provided SASS variable overrides, i could not figure out how to override the inherited styles for borders and placeholder text for input fields.

我想避免使用'！important'除了这些更改影响每个输入所在的特定页面（我不希望更改为'全局' ）。

I would like to avoid using '!important' in addition to these changes on affecting the specific page each input is on (I dont want the changes to be 'global').

推荐答案

使用Ionic2 RC4，您必须在app.scss文件中添加以下行：

With Ionic2 RC4, you have to add the following line in your app.scss file:

.text-input::-moz-placeholder {
  color: white;
}

.text-input:-ms-input-placeholder {
  color: white;
}

.text-input::-webkit-input-placeholder {
  text-indent: 0;
  color: white;
}

这篇关于离子2占位符文本样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！