web-dev-qa-db-ja.com

入力でプレースホルダーのみを斜体にする方法

こんにちは、誰かが私にプレースホルダーのみを斜体にする方法を教えてもらえますが、誰かがテストボックス内に書くとき、書かれたWordは斜体を使うべきではありません。

MyCode：

<input type="text" id="search" placeholder="Search" style="font-style:italic">

入力全体ではなくプレースホルダーのみに斜体を配置するにはどうすればよいですか？

htmlinputplaceholder
41
prabin badyakar

承知しました。これらのCSSルールにスタイルを適用するだけです：

::-webkit-input-placeholder {
   font-style: italic;
}
:-moz-placeholder {
   font-style: italic;  
}
::-moz-placeholder {
   font-style: italic;  
}
:-ms-input-placeholder {  
   font-style: italic; 
}

おそらく、これらのルールのすべてが必要なわけではありません。私はいつも CSS Tricks を参照します。

Edit：これらのルールを1つのセレクターに結合できないことに注意してください。これらは、以下のコメントの Dave Kennedy で示されているように、個別に宣言する必要があります。

77
Joseph Marikle

別の方法：：focusセレクターはあなたの友達です。プレースホルダー専用にするには、：notセレクターを使用します。これには、入力フィールドが現在の選択ではない場合にのみCSSルールが適用されます。 CSSで定義します。

.class-of-your-input-field:not(:focus) {
font-style:italic;
}
4
Mike Aron