複数の私は、このようにやっている私の入力ボックスのプレースホルダテキストを、スタイルにしたい入力プレースホルダーテキスト

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>