多樣式輸入佔位符文本

Question

我想要的風格我的輸入框中佔位符文本，這是我現在做的是這樣的：

::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
::-moz-placeholder { font-size: 16pt; color: #555; } 
:-ms-input-placeholder { font-size: 16pt; color: #555; } 
input:-moz-placeholder { font-size: 16pt; color: #555; } 

但我有哪裏不同的佔位符需要不同的風格類似這樣的場景：

這可能嗎？我似乎無法成功地將上面的CSS與類或其他類型的元素選擇器組合在一起。我發現的所有教程都只停留在一次設置佔位符文本，並沒有涉及多個佔位符樣式。這是全球性的嗎？

Answer 1

你必須對類與僞元素結合在一起，然後你可以申請一個類的輸入內容：

input::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
input::-moz-placeholder { font-size: 16pt; color: #555; } 
 
input:-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
input.other::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
input.other::-moz-placeholder { font-size: 12pt; color: red; } 
 
input.other:-ms-input-placeholder { font-size: 12pt; color: red; } 
 
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input> 
 
<input type="text" class="other" placeholder="Hello"></input>

注意：爲了清晰和正確，我在此處添加了input。

Fiddle

記住，僞選擇不在頁面上實際的元素，而是連接到一些其他的元素。將它們與其他元素選擇器結合起來以匹配更具體的內容。

Answer 2

在你的輸入上使用類應該可以工作。你有沒有試過以下：

/* WebKit browsers */ 
 
input.myClassNameOne::-webkit-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 4 to 18 */ 
 
input.myClassNameOne:-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 19+ */ 
 
input.myClassNameOne::-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Internet Explorer 10+ */ 
 
input.myClassNameOne:-ms-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
}

<input type="text" class="myClassNameOne" placeholder="test input" /> 
 
<input type="text" class="myClassNameTwo" placeholder="test input" />

的jsfiddle：http://jsfiddle.net/markwylde/fFLL7/1/

Answer 3

雖然其他答案是正確的，但我想指出，您不需要直接將類應用於輸入。你也可以將它應用到一些父包裝，並稍微修改建議的CSS來獲得相同的結果，這可能更容易，因爲你可能需要在HTML上做更少的修改。

一個例子（見fiddle）：

.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
.default ::-moz-placeholder { font-size: 16pt; color: #555; } 
 
.default :-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
.default input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
.other ::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
.other ::-moz-placeholder { font-size: 12pt; color: red; } 
 
.other :-ms-input-placeholder { font-size: 12pt; color: red; } 
 
.other input:-moz-placeholder { font-size: 12pt; color: red; }

<div class='default'> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
</div> 
 
    
 
<div class='other'> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
</div>