デザインサンプルで学ぶCSSによるスタイリング～「フォーム（ラジオボタン・チェックボックス・セレクトフォーム）」編

CSSで作るWeb用パーツ（6）

CSSで生成したラジオボタン

　次は、CSSだけで図5のようなラジオボタンを生成してみましょう。

図5　CSSで生成したラジオボタン（radio.html）

　HTMLはp要素のid名が異なるだけで先のサンプルと同じです。今回もinput要素を「opacity:0;」で透明にして隠します。次に、:before擬似要素でラジオボタンを作り、:after擬似要素で選択時にボタン中央に表示される円を作ります。

　それぞれ「content:"";」で空の内容を作り、widthとheightプロパティで幅と高さを指定、「border-radius: 50%;」で正円の形にし、background-colorで色を付けます。

図6　CSSで生成したラジオボタン（radio.html）

リスト6　CSSでラジオボタンとチェック時の円を生成／CSS（radio.html）

#radio2 input {
  opacity: 0; /* 透明に */
  ～中略～
}
#radio2 label:before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background-color: #dddddd;
  border-radius: 50%;
  ～中略～
}
#radio2 input[type="radio"]:checked + label:after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #ff0066;
  border-radius: 50%;
  ～中略～
}

　続いてラベルに「position:relative;」を指定して、後に絶対配置するラジオボタンの基準位置とした上で、padding-leftでボタン分の幅を指定しておきます。

図7　ラベルの基準位置と余白を指定（radio.html）

リスト7　ラベルの基準位置と余白を指定／CSS（radio.html）

#radio2 label {
  position: relative; /* 絶対配置の基準位置 */
  padding-left: 30px; /* ボタンと余白の幅分空ける */ 
  ～中略～
}

　いよいよラジオボタンと選択時に表示される円を配置していきます。それぞれ「position:absolute;」を指定して、topやleftプロパティで絶対配置します。margin-topに円の半径分のネガティブマージンを設定して位置を調整します。

図8　ラジオボタンと選択時の円を配置する（radio.html）

リスト8　ボタンとチェック時の丸を絶対配置／CSS（radio.html）

#radio2 label {
  position: relative; /* 絶対配置の基準位置 */
  ～中略～
}
#radio2 label:before {
  ～中略～
  position: absolute; /* 絶対配置 */
  top: 50%;
  left: 0;
  margin-top: -10px;
}
#radio2 input[type="radio"]:checked + label:after {
  ～中略～
  position: absolute; /* 絶対配置 */
  content: "";
  top: 50%;
  left: 5px;
  margin-top: -5px;
}

　最後に:focus擬似クラスでフォーカス時のスタイルを指定します。ここではbox-shadowプロパティを指定してハイライト表示しています。サンプルの値は、水平方向に0、垂直方向に0、ぼかし距離に1px、広がりに3px、色は#ff6699を指定しています。

リスト9　フォーカス時のスタイル／CSS（radio.html）

#radio2 input[type="radio"]:focus + label:before {
  box-shadow: 0 0 1px 3px #ff6699; /* ハイライト表示 */
}