先日、WebKit の開発者向け Blog で、input type=checkbox の switch 属性、つまり <input type=checkbox switch> みたいな記述に、Safari 17.4 で対応しますよという記事が公開されました。
Safari 17.4 で `<input type=checkbox switch>` に対応したってさ （まだ HTML Standard には含まれていないけど） / "An HTML Switch Control" (8 users) https://t.co/TAksKUDzsp
— Yoshiki Kato (@burnworks) February 29, 2024
で、実際に 3 月 5 日付けで Safari 17.4 が正式にリリースされましたので、実際にどんな感じになるのかを確認してみました。
確認ページ
GitHub 上に簡単な確認用のページを下記に作ったので、Safari 17.4 が入っている環境でアクセスすると、実際の表示がどんな感じになるのか確認できます。
非標準の ::thumb や ::track 疑似要素を使用するともっと色々と見た目をいじれるみたいですが、面倒くさいので今回は無視して、基本的な switch 属性の指定のみとしています。
その他、appearance: none; しておいて CSS で見た目をコントロールしたり、:checked 疑似クラスを使って 「On 状態」 のスタイルを指定したりできる点は、従来のinput type=checkbox と同様です。
Safari 17.4 ではない環境向けに下記にスクリーンショットを。
switch 属性を指定しただけ
下記は、input type=checkbox に switch を指定して、Safari 17.4 で表示した例です。これだけでトグルスイッチの見た目になってますね。
CSS で accent-color を指定した例
下記は、accent-color プロパティを使用して、アクセントカラーを適用した例です。サイトのテーマカラーに合わせたトグルスイッチにしたい、なんて時には CSS で簡単に調整できます。
input[type="checkbox"][switch] {
accent-color: #dc2626;
}指定する色によってはコントラスト比などの関係で見づらくなる場合もありますから注意しましょう。
従来の実装例
switch 属性をサポートしない環境向けに、見た目上 （あくまで見た目上です）、iOS などでよく見るデザインのトグルスイッチを実装したい場合、例えば下記のような実装方法が考えられます。
<label>
<span class="switch">
<input type="checkbox" checked>
</span>
Toggle switch
</label>HTML は上記のような感じにしておいて、CSS で下記のようにすれば、見た目は近い感じになると思います。
.switch {
position: relative;
display: inline-flex;
height: 2rem;
width: 3.5rem;
align-items: center;
border-radius: 9999px;
}
.switch:focus-within {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: #2563eb;
}
.switch input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.switch:has(input[type="checkbox"]) {
--bg-opacity: 1;
background-color: rgb(152 152 157 / var(--bg-opacity));
}
.switch:has(input[type="checkbox"]:checked) {
--bg-opacity: 1;
background-color: rgb(52 199 89 / var(--bg-opacity));
}
.switch::before {
content: "";
position: absolute;
left: .25rem;
height: 1.75rem;
width: 1.75rem;
border-radius: 9999px;
--bg-opacity: 1;
background-color: rgb(255 255 255 / var(--bg-opacity));
--shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
box-shadow: var(--shadow);
transition-property: transform;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
}
.switch:has(input[type="checkbox"]:checked)::before {
--translate-x: 1.25rem;
transform: translate(var(--translate-x), 0);
}実際には、この実装だと見た目はトグルスイッチですが、意味的にはチェックボックスですから、より明確にスイッチ （On / Off という状態を伝えたい） であることを表すのであれば、role="switch" と aria-checked 属性を組み合わせるなどして実装する必要はあると思います。
Safari 17.4 は、<input type=checkbox switch> を、role="switch" として扱うとのことですので、実装側としては楽でよいなと思いました。
現状では、HTML Standard 仕様に反映されるのか、もしくは反映されるとしていつ頃になるのか、などについては全くわかりませんし、特定の環境のみでのサポートなので積極的に使用するような状況ではないと思いますが、個人的にはこういうトグルスイッチの UI が必要な状況も多いと思いますので、標準化されると色々と楽になるなとは思います。
