テーブルセルをクリックするとinputにチェックが入るCSSの書き方

ウェブアンケートとか、テーブルを使ったフォームでよくあるもので、例えば以下のようなコードで書かれるものです。

これのテーブルセル内をクリックすると、チェックボックスなりラジオボタンなりがon状態にする方法です。

display: table-cell;が鍵

これを実現するには、テーブル内のinputに対して、display: table-cell;というスタイルを当てて、幅と高さをとってやれば良いです。例えば以下のように。

display: table-cell;というのは、tdやthのようなスタイル表示にするもので、基本的にブロックレベル表示になります。

じゃあdisplay:block;でもいいんじゃねーのかと思われるかもしれませんが、それだとセルをクリックしてもチェックが入りません。

ちなみにこのtable-cellというのは、IEでは動かないようなので、他のモダンブラウザのようにIEでも動かしたいなら、Javascriptを使ったほうがよさそうです。

GRC検索順位チェックツール*
順位チェックとサイト管理を1つのツールで!検索順位チェックツールGRC*

スポンサード・リンク

«
»
 

トラックバックURL

コメントを書き込む