如何在textarea/input標籤中修改佔位符屬性的CSS？

我試圖修改文本區域元素的佔位符屬性中文本的字體大小。我可以使用vanilla CSS來做到這一點，但是當我嘗試在我的應用中模仿這個想法時 - 使用Angular Material 2的Angular 2應用程序 - 我無法獲得所需的行爲。在香草HTML/CSS我可以簡單地做到以下幾點：如何在textarea/input標籤中修改佔位符屬性的CSS？

HTML：

<textarea id="foo" placeholder="goodbye enemy!"></textarea>

CSS：

#foo::-webkit-input-placeholder{font-size: 100%;}

我只需修改百分比值來修改的大小佔位符文本。但是，當我嘗試使用Angular Material嘗試相同的方法時，我無法修改字體大小。

輸入指令中的角度材料2 doc在這裏：Docs on the Angular 2 Material Input Directive。我玩過與它相關的plnkr，但不能使用給定的方法修改佔位符文本。有誰知道爲什麼？該文檔指出<md-input-container>只是本地輸入/ textarea標籤的包裝，所以我不確定它是否覆蓋背景中的某種行爲。任何幫助，將不勝感激。

An earlier SO discussion that could also be helpful.

來源

2017-08-16 jrDeveloper

你不想在textarea DOM中使用'mdInput'嗎？ –

您是否使用瀏覽器開發工具（通常爲f12）爲您提供有關您的id或placeholder屬性是否完好的線索？ – wunth

的祕密是，你不需要的樣式輸入，而是產生標籤。

考慮佔位符標籤是<span>緊隨<input>內部產生，你可以用它的目標：

input + span > label { 
    color: red !important; 
}

的+表示你只是尋找目標第二天匹配的元素，並且>表示直接的孩子。

這可以看出，在this Plunkr工作。

注意，!important聲明是必需的選擇之上，因爲它具有較低的specificity比角的例如CSS選擇器。理想情況下，您希望提供更高的特異性，而不是使用!important。

希望這會有所幫助！ :)

來源

2017-08-16 23:42:51

值得注意的是'textarea'也適用，但僅適用於使用附加到內部DOM的'mdInput'。 –

謝謝！出於好奇，你是如何認識到所需的css選擇器的正確組合？（整個輸入+ span>標籤業務）。我其實似乎仍然無法使用你的技術在我的應用程序中修改生成的標籤，但我正在嘗試針對css選擇器的正確組合。 – jrDeveloper

我在Angular示例中通過簡單的反覆試驗來解決問題。通過使用F12 Developer工具，我注意到生成的''被放置在''內，它緊跟在''後面。因此，我使用'input + span> label'來給出高度的特異性，所以我不需要使用'！important'。可悲的是，我仍然需要這個。儘管這只是一個特殊問題。無論結構如何，它都會在DOM中成爲''。只需調整選擇器以適應。如果需要的話，你甚至可以只針對「輸入」。請注意，您可能需要'！important'。 –

如何在textarea/input標籤中修改佔位符屬性的CSS？

回答

相關問題