CSSだけを使用してボタン風のラジオボタンを作成してクリックで色が変わるようにする方法

CSSだけを使用してボタン風のラジオボタンを作成し、クリックで色が変わるようにする方法です。以下のコードは、HTMLとCSSを使用してこの目的を達成する方法を示しています。

ラジオボタンを作る

まずは、ラジオボタンを作ります。

  <!-- ラジオボタンとラベルを組み合わせてボタン風のエレメントを作成 -->
  <input type="radio" id="option1" name="options">
  <label class="radio-button" for="option1">オプション1</label>

  <input type="radio" id="option2" name="options">
  <label class="radio-button" for="option2">オプション2</label>

  <input type="radio" id="option3" name="options">
  <label class="radio-button" for="option3">オプション3</label>

このコードは、3つのボタン風のラジオボタンを作成します。

ラジオボタンを非表示にする

ラジオボタンを非表示にします。

  /* ラジオボタンを非表示にする */
  input[type="radio"] {
    display: none;
  }

ラジオボタンが消えました。

ボタン風のスタイルを適用する

ボタン風のスタイルを適用します。

   /* ボタン風のスタイルを適用 */
  label.radio-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }

  /* 選択されたラジオボタンのスタイルを変更 */
  input[type="radio"]:checked + label.radio-button {
    background-color: #3498db;
    color: #fff;
    border-color: #3498db;
  }

ボタン風のスタイルになりました！

まとめ

このコードは、3つのボタン風のラジオボタンを作成し、選択されたボタンがクリックされると背景色とテキスト色が変わるようになっています。

ラジオボタン自体は非表示にし、代わりにラベルをボタンとしてスタイリングしています。また、選択されたラジオボタンに対してはinput[type="radio"]:checked + label.radio-buttonのセレクタを使用してスタイルを変更しています。