[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

CSSでラジオボタンをカスタマイズ

CSS SCSS

CSSでラジオボタンをカスタマイズ

ラジオボタンをCSSでカスタマイズするには、まず基本的なラジオボタンのスタイリングを行い、その後、ラジオボタンを見えなくし、カスタムデザインを作成するというアプローチを取ることが一般的です。
以下はその手順とサンプルコードです。

1. 基本的なラジオボタンのHTML構造

まず、基本的なラジオボタンのHTMLを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カスタムラジオボタン</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form>
    <div class="radio-group">
      <label class="radio-label">
        <input type="radio" name="option" value="1" class="radio-input">
        <span class="custom-radio"></span>
        Option 1
      </label>
      <label class="radio-label">
        <input type="radio" name="option" value="2" class="radio-input">
        <span class="custom-radio"></span>
        Option 2
      </label>
      <label class="radio-label">
        <input type="radio" name="option" value="3" class="radio-input">
        <span class="custom-radio"></span>
        Option 3
      </label>
    </div>
  </form>
</body>
</html>

2. CSSでラジオボタンをカスタマイズ

次に、styles.cssファイルでラジオボタンのスタイリングを行います。

/* 基本のラジオボタンを隠す */
.radio-input {
  display: none;
}

/* ラジオボタンラベルのスタイリング */
.radio-label {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}

/* カスタムラジオボタンのスタイリング */
.custom-radio {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background 0.3s, border 0.3s;
}

/* 選択されたラジオボタンのスタイリング */
.radio-input:checked + .custom-radio {
  background: #007bff;
  border-color: #007bff;
}

/* カスタムラジオボタンの内側の円を作成 */
.custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s;
}

/* 選択された状態での内側の円 */
.radio-input:checked + .custom-radio::after {
  background: #fff;
}

説明

1. 基本のラジオボタンを隠す
.radio-inputクラスを持つinput要素（ラジオボタン）をdisplay: none;で非表示にします。
この状態では実際のラジオボタンは表示されませんが、選択状態などの機能は維持されます。

2. ラジオボタンラベルのスタイリング
.radio-labelクラスでラベルのスタイルを設定します。
position: relative;を指定し、ラジオボタンをカスタマイズするためのcustom-radioを配置します。

3. カスタムラジオボタンのスタイリング
.custom-radioクラスでカスタムラジオボタンの見た目を設定します。
ここでは、borderで外枠を設定し、border-radiusで円形にしています。

4. 選択状態のスタイリング
.radio-input:checked + .custom-radioで、ラジオボタンが選択されたときのスタイルを設定します。
背景色や枠の色を変更します。

5. 内側の円の作成
.custom-radio::afterで、選択されたラジオボタン内の小さな円を作成します。
選択状態ではこの内側の円の色も変わります。

この方法を使用することで、ラジオボタンのデザインを自由にカスタマイズし、ユーザーインターフェースの一部として統一感を持たせることができます。