CSS の attr がトグルボタンの ON/OFF でテキストを変えたいときに便利だった

CSS

HTML/CSS でチェックボックスを用いたトグルボタンをで実装しているとき、トグルの ON/OFF でテキストの文言も変えたいときは css だけでは難しいので js でやってましたが、css でも attr を使えば js 無しでできることを最近知りました。

次のように HTML の要素の属性値に ON と OFF のそれぞれのテキストを指定します。

<label>
    <input type="checkbox">
    <span data-off="無効" data-on="有効"></span>
</label>

これを要素の ::after の content に attr で指定します。

input[type="checkbox"] ~ span::after {
    content: attr(data-off);
}

input[type="checkbox"]:checked ~ span::after {
    content: attr(data-on);
}

チェックボックスが OFF なら ::after の content に data-off の属性値が、ON なら data-on の属性値が使われます。

あとはトグルボタン風に CSS で装飾すれあ OK です。

MDN によるとこれは IE8 ぐらいから使えるようです。

次のような感じのトグルボタンが実装できます。

.

.

.

よく考えたら２つのボタンを重ねて表示して表示非表示を切り替えるだけでも出来ますね・・