10

入力ボックスのプレースホルダー テキストのスタイルを設定したいのですが、次のようにしています。

::-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をクラスまたは他のタイプの要素セレクターとうまく組み合わせることができないようです。私が見つけたすべてのチュートリアルは、プレースホルダー テキストを 1 回設定するだけで終わり、複数のプレースホルダー スタイルを設定することはありません。それはグローバル設定ですか？

4

3 に答える 3

6

入力でクラスを使用すると機能するはずです。以下を試しましたか：

/* 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/

于 2013-08-29T22:27:27.990 に答える
5

他の答えは正しいですが、クラスを入力に直接適用する必要はないことに注意してください。また、それを親ラッパーに適用し、提案された 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>

于 2013-08-29T22:44:29.560 に答える