每個HTML5佔位符屬性有兩種不同的樣式？

我目前想簡單地將我的placeholder=""副本中的星號標記爲紅色，並讓剩餘的佔位符複製我在下面使用的藍色陰影。每個HTML5佔位符屬性有兩種不同的樣式？

HTML標記：

<input type="text" name="firstname" placeholder="* First Name" required>

CSS中我的造型佔位符副本是藍色：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #6785b2; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #6785b2; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #6785b2; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #6785b2; 
}

有什麼想法就如何實現這一目標？

我最好不要使用背景圖像，因爲我已經在選擇框上使用簡單的自定義向下箭頭的背景圖像，我的字段也有不同的大小，所以我真的不想使用多個背景圖像，而是尋求更全面的解決方案...具體還是使用和造型placeholder屬性。

來源

2015-10-13 Fred Randall

看來你想要使用佔位符，而不是正確標註你的輸入字段。這種做法受到HTML5規範的強烈阻礙。請參閱此處的推理：http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute –

尋找這樣的事情（演示僅僅是WebKit的）：http://codepen.io/zvona/pen/wKqLOM

::-webkit-input-placeholder { 
    color: #6785b2; 
} 

::-webkit-input-placeholder::before { 
    content: '*'; 
    color: #FF8F20; 
    font-size: 20px; 
    float: left; 
    margin-right: 0.25em; 
}

來源

2015-10-13 20:33:15 zvona

正如他聲明的那樣，它僅適用於webkit瀏覽器。主要是指Chrome和Safari。你不關心那些使用Firefox或IE嗎？它在移動瀏覽器上工作嗎？他們不會看到那些領域是必需的。只是說老兄。您應該儘可能考慮遵循HTML5規範和建議。 –

我的演示只是WebKit（因爲我很懶），但是您可以將':: before'僞元素的用法擴展到支持佔位符樣式的每個瀏覽器。 – zvona

這是真的，我糾正了。我的實際觀點是，在輸入字段中沒有適當標籤的佔位符的使用受到HTML5規範的強烈阻礙。我可能在這裏假設太多，但似乎是這個計劃。而且由於佔位符屬性對於HTML5來說是新的，所以舊的瀏覽器除了輸入框外不會顯示任何內容。 IE9及更早版本將顯示空白輸入字段，沒有標籤和佔位符。 –

每個HTML5佔位符屬性有兩種不同的樣式？

回答

相關問題