どうも7noteです。スイッチを作りました。
またまた唐突に思い立って、もしかしたらそれっぽいのが作れるのではと思い作ってみました。
使い所は少ないかもしれないですが、どこかのサイトの作成の参考になればいいなと思います。
作り方
index.html
<labelclass="rocker"><inputtype="checkbox"value=""name="rocker"><span></span></label>style.css
labelinput{display:none;/* デフォルトのinputは非表示にする */}label.rocker{border:5pxsolid#000;border-radius:5px;display:inline-block;}label.rockerspan{width:150px;height:50px;position:relative;border:1pxsolid#666;border-right:5pxsolid#666;background:linear-gradient(toright,#00050%,#33351%);display:inline-block;box-sizing:border-box;}label.rockerspan::before,label.rockerspan::after{position:absolute;top:50%;transform:translateY(-50%);}label.rockerspan::before{content:'OFF';color:#FFF;left:2px;}label.rockerspan::after{content:'ON';color:#999;right:2px;}label.rockerinput:checked+span{background:linear-gradient(toright,#33350%,#00051%);border-left:5pxsolid#666;border-right:1pxsolid#666;}label.rockerinput:checked+span::before{color:#999;}label.rockerinput:checked+span::after{color:#FFF;}※課題点
・labelが1つだけではonとoffの切り分けが難しい。
このソースでは、onを押したときだけonにし、offを押したときだけoffにすることができない。
labelを2つ使い分ければできそうな気がするが、また時間のあるときに追記しようと思う。
まとめ
ところでこのスイッチの名前はなんていうのかと思って調べたら、
「ロッカスイッチ」というらしいですね。
勉強になりました。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ