Ionic 2占位符文本样式

我正在使用Ionic 2 rc0的应用程序工作，并且在整个应用程序中仍有几个输入字段需要样式。Ionic 2占位符文本样式

<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变量覆盖，我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式。

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

来源

2016-10-17 Everett

随着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; 
}

来源

2016-12-16 10:49:23 Fr4NgUs

它的工作，在我的情况是我的输入是一个'ion-searchbar'组件，所以我必须：'.searchbar-md .searchbar-input :: - webkit-input-placeholder {color：yellow}' –

其为我工作， – core114

对于Ionic2.0，里面的文件app.ms.css我试图通过.text-input :: - moz-placeholder围绕行号6069进行样式设置。同样可以审判RC0

来源

2016-10-18 09:45:47

离子2提供sass variable overrides你可以用它来轻松地改变风格。

主题/ variables.scss

$text-input-placeholder-color:(#000);

来源

2017-05-28 17:36:29

只是做::占位选择，即

<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>

和CSS只是把它像

ion-input { 
    &.custom-input { 
    font-size: 20px; //sets text font size 
    ::placeholder { 
     font-size: 12px; //sets placeholder font size 
    } 
    } 
}

来源

2018-02-23 12:18:45 Marko

Ionic 2占位符文本样式

回答

相关问题