1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【CSS】ラジオボタンで横並び・◯部分無しの選択UIを作る

Posted at

概要

ラジオボタン(<input type="radio">)を使って、以下のような選択UIのスタイルを作成してみる。
選択肢を横並びにして、選択したことを◯ではなく下線で表す。
radio-buttons.gif

スタイル

HTML
<div class="radio-button-container">
  <div class="radio-button-label">ラジオボタン</div>
  <div class="contents">
    <span>選択肢</span>
    <div class="radio-buttons">
      <input id="one" type="radio" name="radio" value="1" checked>
      <label for="one">One</label>
    </div>
    <div class="radio-buttons">
      <input id="two" type="radio" name="radio" value="2">
      <label for="two">Two</label>
    </div>
    <div class="radio-buttons">
      <input id="three" type="radio" name="radio" value="3">
      <label for="three">Three</label>
    </div>
  </div>
</div>

スタイルを当てない場合、以下のようになる。
スクリーンショット 2020-02-27 17.12.06.png

ラジオボタンの🔘を無くして、選択していることを下線で表すようにする。

SCSS
.radio-button-container {
  color: #404040;
  font-size: 16px;
  font-weight: bold;
  .radio-button-label {
    margin-bottom: 9px;
  }
  .contents {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      padding-right: 6px;
    }
    .radio-buttons {
      display: inline-flex;
      justify-content: space-between;
      height: 25.5px;
      margin: 0;
      padding: 0;
      label {
        padding: 0 3px;
        margin: 0 6px;
        cursor: pointer;
      }
      input[type=radio] {
        display: none;
        &:checked + label {
          border-bottom: 3px solid #FFFF00;
        }
      }
    }
  }
}

See the Pen radio-buttons by mmmmk (@mmmmmmk) on CodePen.

input[type=radio]:checked + labelborder-bottombackgroundにすることで、選択した要素の背景色が変わるようにすることもできる。

SCSS
... ()
&:checked + label {
    background-color: #FFFF00;
}

スクリーンショット 2020-02-27 15.11.28.png

まとめ

ラジオボタンを使って、選択肢が横並び・選択した時に下線で選択したことを表すUIのスタイルを作成した。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?