ASP.NET MVC でチェックボックスのカスタマイズをCSSのみで行う。
ググると以下のようなサイトがヒットするが、そのままでは、ASP.NET MVC で動作しない。
なぜかと言うと、Form要素を作成するときは、HTMLタグを直接入力することはあまりせず、ビューヘルパー(@Html.***For)を使用することが多く、チェックボックスのビューヘルパーはinputタグを2つ作成するからだ。
その解決方法を調べたら、以下のサイトに載っていた。
最初のサイトで使用していた隣接セレクタを使用する代わりに、間接セレクタを使用すれば良いということだった。奥が深い。
ちなみに、labelタグで囲む場合と、labelタグのfor属性を使用する場合があるが、labelタグで囲まない(labelタグのfor属性を使用する)場合は、HTML上はinputタグ、labelタグの順番で書く必要がある。
これは隣接セレクタ、間接セレクタ共に、○○の前という指定が出来ないからである。CSS4では出来るようになるらしい。
これだとデザイン上困ったことになりそうだが、inputタグによるフォーム(チェックボックス)は非表示にされるので特に困らない。
やはりASP.NET MVCの情報を探すには、stackoverflow(英語版)は必須だな。
以上