[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
プレースホルダーがラベルで、コントラストが低く、余白がない入力フォーム
プレースホルダーをラベルにしたフォームや、コントラストが低いフォーム、余白がなかったりするフォームはそれぞれよく見る。特にプレースホルダーをラベル代わりにするのは、すっきりするので多用されている印象。使いたい気持ちはわからなくもない。けどこの3つが組み合わされると、なかなかひどい感じになるという実例をGoogleで見てしまった。 Internet Explorer 10ではこのような感じになる。ページの読み込み直後にメールアドレスを入力するフォームにフォーカスが当たり、プレースホルダーの文字列がその時点で消える。この状態だと、すぐ下のパスワードというプレースホルダーが、あたかもその上の入力ボックスらしきものに対するラベルのように見えないだろうか？ 実際に「パスワードを入れたのにログイン出来ない！」などと言う人はいた。 ラベルのように見えてしまう大きな原因は、その低コントラストでフラットな入
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
