[携帯]inputタグの文字色が外側のフォントカラー指定に影響される

携帯サイトで、背景色を濃い色に、文字色を白(もしくは白に近い色)に指定している箇所に入力フォームを設置する場合、inputタグ(テキストボックスやsubmitボタン)の文字色に注意しましょーというお話です。

サンプルページ

QRコード
QRコード
サンプルページを見る

<div style="background:#333333;color:#ffffff;">
メールアドレス<br />
<input type="text" value="[email protected]" name="mail" size="27" style="width:95%" /><br />
<input type="submit" value="送信する" /><br />
</div>

各キャリアでの表示

docomo(F-06B)

テキストボックス内の文字色も、submitボタンの文字色も「黒」。
外側のフォントカラー指定に影響されない。

F-06Bキャプチャー

au(W63K)

テキストボックス内の文字色も、submitボタンの文字色も「黒」。
外側のフォントカラー指定に影響されない。

W63Kキャプチャー

softbank(830P)

テキストボックス内の文字色も、submitボタンの文字色も、外側のフォントカラー指定に影響される。

930Pキャプチャー

まとめ

各キャリア1端末ずつしかチェックしていないのであれですが、softbankの一部端末では外側のフォントカラー指定がinputタグに影響してしまい、テキストボックスやsubmitボタンの文字色が黒じゃない色になってしまいます。

なので、フォントカラーを白などの薄い色で指定している場合はフォーカスがあたっていないとテキストボックス内やボタンの文字色がかなり見えにくくなってしまいます。

なので、headタグ内部で、

input {color:#000000;}

という指定を念の為にしておくといいと思います。

トラックバックURL

コメント

又、遊びに来ます^^

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ