redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

ASP.NET MVC でチェックボックスのカスタマイズをCSSのみで行う。

ググると以下のようなサイトがヒットするが、そのままでは、ASP.NET MVC で動作しない。

cultureacademia.jp

なぜかと言うと、Form要素を作成するときは、HTMLタグを直接入力することはあまりせず、ビューヘルパー(@Html.***For)を使用することが多く、チェックボックスのビューヘルパーはinputタグを2つ作成するからだ。

その解決方法を調べたら、以下のサイトに載っていた。

stackoverflow.com

最初のサイトで使用していた隣接セレクタを使用する代わりに、間接セレクタを使用すれば良いということだった。奥が深い。

ちなみに、labelタグで囲む場合と、labelタグのfor属性を使用する場合があるが、labelタグで囲まない(labelタグのfor属性を使用する)場合は、HTML上はinputタグ、labelタグの順番で書く必要がある。

これは隣接セレクタ、間接セレクタ共に、○○の前という指定が出来ないからである。CSS4では出来るようになるらしい。

これだとデザイン上困ったことになりそうだが、inputタグによるフォーム(チェックボックス)は非表示にされるので特に困らない。

やはりASP.NET MVCの情報を探すには、stackoverflow(英語版)は必須だな。

以上