ホームページ >ウェブフロントエンド >htmlチュートリアル >プレースホルダー スタイル settings_html/css_WEB-ITnose
入力ボックスで、入力した単語やプレースホルダーを別の色やその他の効果に設定したい場合があります。この場合、次のコードを使用してプレースホルダーのスタイルを設定できます。
::-webkit-input-placeholder{} /* Webkit カーネルを使用するブラウザ*/
:-moz-placeholder{} /* Firefox バージョン 4-18 */
::-moz- Placeholder { }/*Firefox バージョン 19+*/
: -MS-Input-Placeholder {}/*IE ブラウザ*/
注 1: 対応する Input 要素または Textarea 要素をコロンの前に記述します。注 2: プレースホルダー属性は CSS3 で新しく追加された属性です。IE9 および Opera12 より前のバージョンの CSS セレクターはプレースホルダー テキストをサポートしません。
:
CSS コード
#input-test {
COLOR:#FFC0CB;width: 180px;
高さ: 36px;
}} T # input-test :: -webkit-input-Placeholder {COLOR: #Add8e6;
}}
#input-Text :: Pink 大きなニウトが通りかかることを願っています。 helpCOLOR: #add8e6;
}}#input-Text: -MS-Input-Placeholder {// 私の IE は ie9 なので、 Placeholder をサポートできないので、テストできません (⊙ ﹏⊙)、IE10 以降をお持ちの方は、ぜひ試してみてください
;
div>
効果は以下のとおりです:
PS: さらに、プレースホルダーのフォントの太さやその他のスタイルを変更することもできます。
例:
「font-weight: 太字;」を追加しました。効果は次のようになります: