フォームのインタフェースデザイン(4)--チェックボックスとラジオボタンのデザイン

エ・ビスコム・テック・ラボ
2008-06-20 08:00:00
  • このエントリーをはてなブックマークに追加

未対応のブラウザに対応するには

 チェックボックスやラジオボタン関連のセレクタに対応していないブラウザでは、JavaScriptを利用することで同等の処理を行うことができる。JavaScriptを利用すれば、Firefox、Safari、Opera、Internet Explorerで同じように表示することが可能だ。

 たとえば、チェックの有無の判別にはJavaScriptのcheckedプロパティを利用する。checkedプロパティは、項目がチェックされていれば「true」を、チェックされていなければ「false」を返す。次のように記述すれば、チェックの有無によって項目のデザインを変えることができる。

function mycheck(obj) {
if(obj.checked) {
obj.style.border='solid 2px greenyellow';
obj.style.outline='solid 2px greenyellow';
} else {
obj.style.border='none';
obj.style.outline='none';
}
}

ブラウザで表示を確認する
ページを読み込んだ段階での表示 ページを読み込んだ段階での表示
項目をチェックしたときの表示 項目をチェックしたときの表示

 4回にわたってフォームのインタフェースデザインに関連したセレクタを紹介してきたが、CSS 3の勧告候補「Basic User Interface Module」には、まだ紹介していないセレクタが掲載されている。これらは次世代のフォームの規格であるXFormsやWeb Forms 2.0で提案されているセレクタだ。これらのセレクタについては、また機会を改めて紹介したい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]