inputタグのテキスト欄に画像を載せる方法
OpenIDのサイトを眺めていたら、面白いなーと思うデザインが
ついついツイッターより引用しました。
何が面白いかというと、OpenIDを入力する欄に画像が貼ってあることです。入力する欄がどういうものかを理解させやすくなります。面白いです。
どうやって実現しているのかと、CSSを見てみたらあっさりとしたものでビックリしました。
input.hoge { background-image: url(hogehoge); padding-left: 16px /* 貼る画像によって可変 */ }
こんな感じで良いようです。
テキスト入力欄は多くあると見分けがつかなくなる事もあります。そんなときに、わかりやすい画像を載せて見ると、ユーザビリティの向上に繋がるのではないかと思います。