フォームのラジオボタンにアニメーションをつける

フォームなどで用いられるラジオボタンにアニメーションをつける方法を紹介します。CSSだけで簡単に実装することができるので、ちょっとした動きをつけたい場合に使えそうなスタイルになっています。

アニメーションの作り方

まずは、HTMLを使ってラジオボタンを設置しましょう。

<input type="radio" id="btn1" name="test"><label for="btn1">ボタン1</label>
<input type="radio" id="btn2" name="test"><label for="btn2">ボタン2</label>

次にCSSを使ってラジオボタンをスタイリングしていきます。まずは、デフォルトのラジオボタンは使用しないので消しておきます。

input {
  display: none;
}

そして、新たにラジオボタン風にデザインしていきます。見た目はお好みで作ってください。

label {
  position: relative;
  margin-right: 1em;
  padding-left: 20px;
  cursor: pointer;
}

上記のような感じでラベルの表示位置を指定します。「cursor: pointer;」はカーソルを指差しマークにしてわかりやすくしています。

label::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid #087fc4;
  border-radius: 50%;
  box-sizing: border-box;
}
label::after {
  position: absolute;
  content: "";
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background: #087fc4;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s;
}

そして、before疑似要素とafter疑似要素を使ってラジオボタンを装飾していきます。before疑似要素では外枠の丸い円を作り、after疑似要素ではチェックしたときの丸い円を作っています。「transform: scale(0);」としているのは、ボタンにチェックが入るまでは見えないようにするために円の大きさをゼロにしています。

最後にラジオボタンをクリックしたときのアニメーションを作ります。

input:checked + label::after {
  transform: scale(1);
}

上記は、チェックが入ったラジオボタンの直下のラベルに対してどのような指定をするかという記述で、先程のafter疑似要素で指定した「transform: scale(0);」で見えなくしていたものを「transform: scale(1);」に変えてボタンにチェックが入ったように見せています。

• DEMO

以上が、CSSを使ってラジオボタンにアニメーションをつける方法となります。