Ionic 2 占位符文本样式

Ionic 2 placeholder text styling(Ionic 2 占位符文本样式)
本文介绍了Ionic 2 占位符文本样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在使用 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>

ionic 2 输入接口 http://ionicframework.com/docs/v2/api/components/input/Input/

ionic 2 input 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;
}

这篇关于Ionic 2 占位符文本样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社
AngularJS Error: Unknown provider: aProvider lt;- a(AngularJS 错误:未知提供者:aProvider lt;- a)
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)