フォーム入力例「placeholder 属性」へのスタイルシート適用

Filed under: contactform7,css — kdcs @ 23年4月8日 土曜日

Contact Form 7で入力例としてplaceholder属性を付ける場合のコード
例として氏名を必須にし、入力例を「田中 太郎」にする

[text* your-name autocomplete:name placeholder "田中 太郎"]

これで出力されるhtml

<div id="entryForm">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" placeholder="田中 太郎" value="" type="text" name="your-name" />
</div><!--/#entryForm-->

このinputタグ内のplaceholder属性にcssを適用する

#entryForm input::-webkit-input-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input::-moz-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input:-ms-input-placeholder {
    color: #aaa;
    font-size: 77%;
}

【注意】
このプレフィックスのついたcssをまとめて一括指定すると何故か適用されない

サイト内検索

カテゴリー

最近の投稿

« |フォーム入力例「placeholder 属性」へのスタイルシート適用| »
↑上に戻る