CSS: SafariでHTML標準のラジオボタン、チェックボックスの大きさをCSSで調整する方法メモ📝

SafariでHTML標準のラジオボタン、チェックボックスの大きさをCSSで調整するのがSafariでだけ動かずハマったのでメモ📝

結論

height、widthではなくtransform: scaleで拡大して調整する。

See the Pen Adjustment size for Radio and Checkbox. by madogiwa (@madogiwa0124) on CodePen.

説明

以下のようなCSSでHTML標準のラジオボタン、チェックボックスの大きさを調整しようとするとChrome/Firefoxでは動作しますが、

input[type="radio"],input[type="checkbox"] {
  height: 32px;
  width: 32px; 
}

fieldset {
  display: flex;
  gap: 8px;
  
  label {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

Safariでは以下のようにサイズが反映されません。

そのため以下のようにtransform: scaleを使うと大きさの調整ができる。

input[type="radio"],input[type="checkbox"] {
  transform: scale(2)
}

ただし、これは単純に2倍に引き延ばしているだけなので画質が落ちて汚く見えてしまう場合があるので注意⚠️

とりあえず見た目はある程度で大きさだけ調整したいケースでは良いですが、ちゃんとブラウザで統一して綺麗に見せるならカスタムしたUIコンポーネントを作成した方が良いですね😓

参考

gist.github.com

chriscoyier.net