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

by sakaki0214[Mobile]
2010-11-15 16:29:37

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

サンプルページ

QRコード
<画像:QRコード>
サンプルページを見る

<div style="background:#333333;color:#ffffff;">
メールアドレス<br />
<input type="text" value="hogehoge@hoge.jp" 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;}

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

[*]前の記事 | [#]次の記事
TOP

コメント(1)

Powered by MT4i 3.0.8X1
携帯アクセス解析