HOME > 開発者向けBLOG > Webデザイン >  checkedセレクタでラジオボタンを表現

Technology Note 開発者向けBLOG

Webデザイン

checkedセレクタでラジオボタンを表現

こんにちは、ゼノフィ渡部です。

checkedセレクタで、画像を使用せずにラジオボタンを表現する方法ご紹介いたします。

ポイントは27行目の「opacity: 0;」と32行目の「input[type=”radio”]:checked + label」です。

「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので、「opacity: 0;」でラジオボタンを消してます。32行目の「input[type=”radio”]:checked + label」の「:checked」はラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素にスタイルを適用するものです。ここではラジオボタンに適用し、「+」の隣接セレクタでラベル要素に対して背景色を指定しています。

13行目と14行目で記述しているスタイル内容は同じです。14行目の「-webkit-」はベンダープレフィックス(接頭辞)といわれるもので、ブラウザベンダーが独自の拡張機能を実装、草案段階の仕様を先行実装する場合に、それが拡張機能であることを明示するために付ける識別子です。 将来的にベンダープレフィックスが必要なくなった場合のことを考慮し、13行目にベンダープレフィックスを外した記述をしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
ul.radio li {
  position: relative;
  float: left;
  width: 120px;
}
 
ul.radio label {
  display: block;
  padding: 10px;
  border-right: 1px solid #6ba8e5;
  border-radius: 10px 0 0 10px; /* 男性側の左上と左下を角丸に */
  text-align: center;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1))); /* 将来用 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1))); /* Chrome、Safari用 */
}
 
ul.radio li:last-child label {
  border-right: none; /* 女性側の(最後のラベル要請)右線を消去 */
  border-radius: 0 10px 10px 0; /* 女性側の(最後のラベル要請)右上と右下を角丸に */
}
 
ul.radio input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0; /* ラジオボタンを消去 */
  tap-highlight-color: rgba(0, 0, 0, 0); /* 将来用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* タップ時のハイライト表示をオフ */
}
 
/* クリックした後の表示 */
ul.radio input[type="radio"]:checked + label {
  background: gradient(linear, left top, left bottom, color-stop(1%,rgba(161,219,255,1)), color-stop(78%,rgba(234,247,255,1))); /* 将来用 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(161,219,255,1)), color-stop(78%,rgba(234,247,255,1))); /* Chrome、Safari用 */
}

男性と女性のそれぞれのラジオボタンのidとラベル要素のforを同一にし、ラジオボタンのnameを統一します。こうすることによって、男性と女性が選択された場合に、どちらか一つを選択状態にすることができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="radio clearfix">
    <li>
        <input type="radio" name="sex" id="man" />
        <label for="man">
            男性
        </label>
    </li>
    <li>
        <input type="radio" name="sex" id="woman" />
        <label for="woman">
            女性
        </label>
    </li>
</ul>

表示確認はPCではGoogle Chrome14.0、Safari5.1.1、スマートフォンではAndroid2.2、iOS4.1で確認しています。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
ul,li {
  margin: 0;
  padding: 0;
}
 
ul {
  list-style: none;
}
 
ul.radio li {
  position: relative;
  float: left;
  width: 120px;
}
 
ul.radio label {
  display: block;
  padding: 10px;
  border-right: 1px solid #6ba8e5;
  border-radius: 10px 0 0 10px; /* 男性側の左上と左下を角丸に */
  text-align: center;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1))); /* 将来用 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1))); /* Chrome、Safari用 */
}
 
ul.radio li:last-child label {
  border-right: none; /* 女性側の(最後のラベル要請)右線を消去 */
  border-radius: 0 10px 10px 0; /* 女性側の(最後のラベル要請)右上と右下を角丸に */
}
 
ul.radio input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0; /* ラジオボタンを消去 */
  tap-highlight-color: rgba(0, 0, 0, 0); /* 将来用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* タップ時のハイライト表示をオフ */
}
 
/* クリックした後の表示 */
ul.radio input[type="radio"]:checked + label {
  background: gradient(linear, left top, left bottom, color-stop(1%,rgba(161,219,255,1)), color-stop(78%,rgba(234,247,255,1))); /* 将来用 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(161,219,255,1)), color-stop(78%,rgba(234,247,255,1))); /* Chrome、Safari用 */
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="radio clearfix">
    <li>
        <input type="radio" name="sex" id="man" />
        <label for="man">
            男性
        </label>
    </li>
    <li>
        <input type="radio" name="sex" id="woman" />
        <label for="woman">
            女性
        </label>
    </li>
</ul>

PAGETOP