CSSの:has()疑似クラスってまだなん？
トグルボタンが必要だったので、checkboxを使ってごにょごにょするのにかなり複雑に組まないといけないのでイヤだなと思ってそういえば結構前に噂になってた:hasって使えるんじゃ無いか？とやってみたけど全然動かない、サンプルサイトも動いてない、仕方なく調べて見たら（:has() – CSS: カスケーディングスタイルシート | MDN）Firefoxが未だ対応してないらしい。
一応せっかく書いたので載せておくことにします。
.toggle { box-sizing: border-box;color: #fff;background-color: #ccc; width: 85px; height: 32px; border-radius: 5px; overflow: hidden; position: relative; display: inline-flex; align-items: center; flex-shrink: 0; user-select: none; vertical-align: middle; margin: 0;}
.toggle:has(>input:checked) { opacity: 1; background-color: #357ed1;}
.toggle input {display:none;}
.toggle::before,.toggle::after { display: block; position: absolute; z-index: 2; line-height: 100%; width: calc(100% - 32px - 3px); text-align: center;}
.toggle::before {content: 'オン';opacity: 0;left: 3px;}
.toggle::after {content: 'オフ';opacity: 1;right: 3px;}
.toggle:has(>input:checked)::before { opacity: 1;}
.toggle:has(>input:checked)::after { opacity: 0;}
.toggle .switch { background-color: #fff; display: block; height: 100%; position: absolute; right: 0; z-index: 3; box-sizing: border-box; transition: right 150ms linear, border-color 150ms linear; width: 32px; border-radius: 5px; border: 3px solid #ccc; right:calc(100% - 32px); }
.toggle:has(>input:checked) > .switch { border-color: #357ed1; right: 0; }
.onoff .switch {color: #999; border: 1px solid #999; display: inline-block; padding: 3px 5px; line-height: 1.2;}
.onoff input {display:none;}
.onoff .switch::after { content: 'オフ'; display: inline; }
.onoff input:checked + .switch {color: #357ed1; border-color: #357ed1;}
.onoff input:checked + .switch::after {content: 'オン';}<label class=""><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>
<label class="toggle"><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>
<label class="onoff"><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>できあがりは下の通りです。
左から「無加工なチェックボックス」「:has()を使ったトグルボタン」「hasが使えないのでとりあえず同じHTMLでオンオフ切り替えれるようにだけしたもの」となっています。
追伸
firefoxも2023年12月19日以降「:has()」が使えるようになったもようです。
Tags: CSS