先日とあるカラーミーショップ用テンプレートを作成するにあたり、極力JavaScriptを使わずにHTMLとcssだけで作ってください、ということで、ドロワーメニューやアイコンの変形などにcheckboxを多用しました。

スライドもcssだけで作ってやろうかと思っていたのですが、よく見るとカラーミーキットにはslick.jsが元々入ってましたので、変に意固地にならず楽で早い方をチョイスすることにしました。

checkboxも、使わなかったらきっとすぐまた詳細忘れるので備忘録残しておきます。
いつか役に立つかも知れない。

checkboxとflexの可変box

hoge1〜3をクリックで変形（checkboxなので、他をクリックしても変形が戻らないのが弱点）

See the Pen checkbox by Takashi Abe (@TakeshiAbe) on CodePen.

＊Wordpressでは全く動作しなかったので代わりにCodePen貼っときます。

type=”checkbox”を type=”radio”にするとこうなります。

↓

See the Pen css radio button by Takashi Abe (@TakeshiAbe) on CodePen.

かんたんな解説

#flexboxはflex。子要素の幅を変えたいなら　flex-wrap:wrap;　にしておかないといけない。

#flexboxの子要素それぞれにinputとlabelを用意し、flexの並び順は全て order:2; にしておく。

余談ですが、labelの中にhタグを入れるのは非推奨だそうです。今回はじめて知りました。

inputにチェックが入ったら直後のdivのwidthを100%に。並び順は１にする（order:1;）。