Html Ionic 2 占位符文本样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40091138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2 placeholder text styling
提问by Pezetter
I am working on an application using Ionic 2 rc0 and have several input fields throughout the application that still need styling.
我正在使用 Ionic 2 rc0 开发一个应用程序，并且在整个应用程序中有几个仍然需要样式的输入字段。
<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 input api http://ionicframework.com/docs/v2/api/components/input/Input/
离子 2 输入 api http://ionicframework.com/docs/v2/api/components/input/Input/
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.
具体来说，我需要在活动时更改占位符文本和下边框的样式。通过 API 并提供 SASS 变量覆盖，我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式。
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').
除了影响每个输入所在的特定页面的这些更改之外，我还想避免使用“!important”（我不希望更改是“全局”的）。
回答by Fr4NgUs
With Ionic2 RC4, you have to add the following line in your app.scss file:
使用 Ionic2 RC4，您必须在 app.scss 文件中添加以下行：
.text-input::-moz-placeholder {
color: white;
}
.text-input:-ms-input-placeholder {
color: white;
}
.text-input::-webkit-input-placeholder {
text-indent: 0;
color: white;
}
回答by Marko
Just do the ::placeholder selector, i.e.
只需执行 ::placeholder 选择器，即
<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>
and in css just call it like
并在 css 中称它为
ion-input {
&.custom-input {
font-size: 20px; //sets text font size
::placeholder {
font-size: 12px; //sets placeholder font size
}
}
}
回答by Pezetter
Ionic 2 provides sass variable overridesyou can use to easily change the style.
Ionic 2 提供了可用于轻松更改样式的sass 变量覆盖。
theme/variables.scss
主题/变量.scss
$text-input-placeholder-color:(#000);
回答by user10018800
This works for me :D
这对我有用：D
ionic cli 4.1.1
example.scss
例子.scss
ion-input {
::placeholder{
color:white !important;
}
}
example.html
示例.html
<ion-input placeholder="Username" type="text"></ion-input>
回答by Druta Ruslan
For Ionic 4 from docs custom-properties.
对于来自 docs custom-properties 的Ionic 4 。
<ion-input class="custom-class"></ion-input>
*.scss
*.scss
ion-input {
&.custom-class {
--placeholder-color: #fff;
}
}
回答by Fay007
In case someone needs help:
如果有人需要帮助：
ion-input {
color: #000000ad !important;
font-size: 16pt;
--placeholder-color: black !important;
--placeholder-opacity: 100%;
}
opacity value makes it looks like just like input text.
opacity 值使它看起来就像输入文本。
回答by Praful vats
For Ionic2.0 , inside file app.ms.css I tried to do styling over .text-input::-moz-placeholderaround line number 6069 and it worked. Same can be tried for RC0
对于 Ionic2.0 ，在文件 app.ms.css 中，我尝试通过.text-input::-moz-placeholder围绕第 6069 行设置样式，并且成功了。RC0 也可以试试
