CSS - 無法通過分類更改佔位符顏色

我正在使用開發人員在全局定義佔位符顏色的項目。但現在我需要使用不同的佔位符顏色來設置表單樣式。我如何正確解決它？CSS - 無法通過分類更改佔位符顏色

CSS

::-webkit-input-placeholder { 
color: red; 
} 
:-moz-placeholder { 
color: red; 

} 
::-moz-placeholder { 
color: red; 

} 
:-ms-input-placeholder { 
color: red; 

} 


.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder { 
    color: blue; 
} 
.box input:-moz-placeholder, .box textarea:-moz-placeholder { 
    color: blue; 
} 
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{ 
    color: blue; 
}

來源

2014-01-14 user2952265

'.box :: - webkit-input-placeholder'等 - [fiddle]（http://jsfiddle.net/vyDns/2/） – Vucko

所以你選擇了沒有任何解釋的答案，他們最可能從Vucko複製它。因爲這很有道理，所以不要把它交給那些花時間和精力解釋它出了什麼問題以及如何解決問題的人。 – Ruddy

我同意@Ruddy **價值增值：**以防萬一有人想知道爲什麼Vucko的建議可行，但不是OP的，因爲OP的CSS會在'.box'內尋找'input'和'textarea'。或者，'input.box'和'textarea.box'也應該按照元素類型工作... – Fr0zenFyr

試試這個代碼：

http://jsfiddle.net/vyDns/3/

你在哪裏密切只需要在前面加.box的一樣：

.box::-moz-placeholder

乾杯

來源

2014-01-14 12:02:26

小心解釋爲什麼只需要'.box'？ – Ruddy

您可以通過幾種解決方案達到目標。

在第一個，你應該改變你的HTML標記。用你的CSS，你首先搜索類「盒子」，然後搜索輸入元素。因此，工作的HTML標記是：

<span class="box"><input /></span>

雖然span元素可以是任何其他元素，它應該只是有框的類。
Demo 1

第二個解決方案是寫在CSS的輸入（以及文本區域）在.box元件的前面。所以你只需要調用具有「box」類的input和textarea元素。

input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder { 
    color: blue; 
}

Demo 2

最後的解決方法是刪除輸入和textarea的一部分。所以你會打電話給所有的元素，它們有一個「盒子」作爲一個類。

.box::-webkit-input-placeholder { 
    color: blue; 
}

Demo 3

來源

2014-01-14 12:08:58

很簡單，因爲我認爲菲利普斯曼對方的回答只是從Vucko的評論複製。我也要回答它並解釋你的代碼爲什麼不起作用。

讓我們用這個作爲一個例子：

.box input::-webkit-input-placeholder { 
    color: blue; 
}

在這裏您選擇.box，然後試圖找到一個input改變佔位符的顏色。如果你的代碼是這樣的：

<div class="box"> 
    <input placeholder="blue" /> 
</div>

它會工作。在上面的代碼中，您正在選擇類.box，然後查找其中的所有inputs。

DEMO HERE

現在在你的代碼，我們有：

<input class="box" placeholder="blue" />

那麼你已經在input，這就是爲什麼你的代碼沒有工作。 input中沒有input。所以從CSS中拿走input，只留下.box意味着你只是選擇了input。

.box::-webkit-input-placeholder

DEMO HERE

希望這說明它不夠好，你瞭解你在哪裏錯了。

來源

2014-01-14 12:13:44 Ruddy

負面的態度是什麼？我沒有複製任何東西，只是爲了滿足他的需要。 –

@FilipHuysmans沒有任何解釋，就像這樣一個簡單的線路，爲什麼它錯了會幫助很多其他人，而不僅僅是OP。看看我的和dTDesign的答案，這將幫助更多的人，然後是OP。不要誤解我的意思，你的答案是正確的，如果你說你自己做了，那麼這就夠公平了，但下次我建議在答案中加入一些努力，以便其他用戶/觀衆也可以從中受益。也不錯，因爲你不喜歡我說的話，所以在那裏放鬆下來。做得好。 – Ruddy

沒問題，這就是你批評人時所得到的。爲了幫助他人，我會在下次嘗試給出更多解釋。 –

CSS - 無法通過分類更改佔位符顏色

回答

相關問題