1. TOP
  2. HTML / CSS
  3. CSSでチェックボックスをカスタマイズする時にdispaly: none;は辞めよう
詳しくはこちら
HTML / CSS
 | 

CSSでチェックボックスをカスタマイズする時にdispaly: none;は辞めよう

チェックボックスやラジオボタンの見た目をカスタマイズする時に、様々な解説記事で

<input>を非表示にして、<label>などの疑似要素を使って見た目を変える

と解説されていますよね。

 

解説記事の例：https://kinocolog.com/css_checkbox/

 

カスタマイズする際、<input>を非表示にする手段としてdisplay: none;は使ってはいけません。

今回はその理由を解説します。

 

多くの解説記事では「<input>をdisplay: none;で非表示にする」と解説されているので注意してください。

目次

結論

  • アクセシビリティ的によろしくない
  • JavaScript（jQuery）で値を正しく取得できないことがある

この2つが理由です。

 

display: noneではなく、以下の方法で<input>を非表示にしましょう。

 

input[type=checkbox],
input[type=radio] {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

この書き方については、以下サイトの「コンテンツを視覚的に隠す」のセクションで詳しく解説されています。

https://frasco.io/writing-css-with-accessibility-in-mind-4fc82b26aecb

アクセシビリティ的によろしくない

まずはサンプルをご覧ください。

    See the Pen
    チェックボックスやラジオボタンをカスタマイズする時にdispaly: noneは辞めよう     by dadada (@dadada-dadada)
    on CodePen.

    上のグループはTabキーを押したら、<input>にフォーカスが当たって背景の色が変わります。

    下のグループはTabキーを押しても、<input>にフォーカスが当たりません。

    下のグループはdisplay: noneで<input>を非表示にしているからフォーカスが当たりません。

    JavaScript（jQuery）で値を正しく取得できないことがある

    display: noneの要素は、JavaScript（jQuery）で値（要素のサイズなど）を正しく取得できないことがあります。

    例えば、要素の高さを取得するelement.offsetHeightをdisplay: noneの要素に使うと、高さがあっても0しか取得できません。

    まとめ

    チェックボックスやラジオボタンの見た目をカスタマイズする時にdisplay: noneで<input>を非表示にするのは様々なデメリットがあります。

    意外と知らない人が多いので、今回紹介した方法を覚えて周りの人にも是非教えてあげてください。

    関連記事