ホームページ >ウェブフロントエンド >htmlチュートリアル >プレースホルダー スタイル settings_html/css_WEB-ITnose

プレースホルダー スタイル settings_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:23:151026ブラウズ

入力ボックスで、入力した単語やプレースホルダーを別の色やその他の効果に設定したい場合があります。この場合、次のコードを使用してプレースホルダーのスタイルを設定できます。

::-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 大きなニウトが通りかかることを願っています。 help

COLOR: #add8e6;

}}

#input-Text: -MS-Input-Placeholder {// 私の IE は ie9 なので、 Placeholder をサポートできないので、テストできません (⊙ ﹏⊙)、IE10 以降をお持ちの方は、ぜひ試してみてください

;

効果は以下のとおりです:

PS: さらに、プレースホルダーのフォントの太さやその他のスタイルを変更することもできます。

例:

「font-weight: 太字;」を追加しました。効果は次のようになります:

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。