📻

ラジオボタンのデフォルトのスタイルの変更

に公開
CSS
HTML 5
tech

背景

デフォルトのラジオボタンのスタイルではなく、デザインカンプに寄せたラジオボタンを実装しないといけないため。

ラジオボタン

input type="radio"にはブラウザごとに異なるデフォルトのスタイルが適応される。
↓こんな感じ

今回はこのブラウザに起因するスタイルをなくして、デザインカンプ通りのラジオボタンを実装する。

アウトプットのゴール

デフォルトのスタイルからデザインカンプに寄せる際の注意点

ブラウザに起因するスタイルを消す際に、一番最初に思いつく方法

display: none;

一番手っ取り早いがdisplay: none;をした場合、tabキーでカーソルの移動を行っている人々のことを蔑ろにしてしまう。
そのため、「デフォルトのスタイルを消す」と言うより「デフォルトのラジオボタンを視覚的に非表示にする」のイメージに近いかもしれない。

HTML

<div class="form-field__item">
  <div class="form-field__radios">
     <label class="form-field__radio form-radio">
       <input class="form-radio__input" type="radio" name="your-name" id="">
          <span class="form-radio__text">アプリの質問</span>
     </label>
     <label class="form-field__radio form-radio">
        <input class="form-radio__input" type="radio" name="your-name" id="">
          <span class="form-radio__text">取材の依頼</span>
      </label>
      <label class="form-field__radio form-radio">
        <input class="form-radio__input" type="radio" name="your-name" id="">
          <span class="form-radio__text">その他</span>
       </label>
  </div>
</div>

CSS

.form-radio__input {
    //デフォルトのラジオボタンを最小化＋浮かして
    width: 1px;
    height: 1px;
    position: absolute;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    //ここまで

    &:checked {
        +.form-radio__text {
            &::after {
                opacity: 1;
            }
        }
    }

}

.form-radio__text {
    font-weight: 700;
    position: relative;
    padding-left: 28px;

    //beforeが外側の円、afterが内側の円
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        border: 3px solid #111;
    }

    &::before {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        left: 0;
    }

    &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: color.$key-orange;
        left: 7px;
        opacity: 0;
    }
}

デフォルトのスタイルが当たっている.form-radio__inputに幅と高さを最小の値を付与。
position: absolute;とclip: rect(0, 0, 0, 0);を指定することで、画面上からラジオボタンを取り除く。
overflow: hidden;でサイズが最小化されても、ブラウザによる予期せぬ表示を防ぐ。

デザインカンプのラジオボタンの再構築

デフォルトのラジオボタンを非表示にしたので、新しくデザインカンプに寄せたラジオボタンを作ります。

基本的にはラジオボタンに入ってくるテキストを起点に擬似要素で作成。
&::beforeと&::afterで外側と内側の円をそれぞれ作ります。

まとめ

私のような初学者の場合、何かを消すときは脳死でdisplay: none;しがちです。
しかし「全員がマウスとキーボードを使用する環境下にいるわけではない」ことなどのユーザビリティを念頭に置きつつ実装することが大切だと感じました。

きっとまだまだユーザー目線だったり、実装のセオリー的な部分など、考えることがたくさんあるんだろう、、、

Discussion