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佔位符文本樣式

回答

相關問題