アマゾンプライムデー開催中!6/22まで 

CSS ラジボタン デザインテンプレート 3選

main_210516_01

フォームに使われているラジボタオンのCSSのデザインサンプルです。

特徴

  • レスポンシブ対応
  • 色変更可

サンプル1

ラジボタン CSSデザインサンプル

マテリアルデザインを踏襲したラジオボタン。

HTML&CSS

See the Pen
css form-step01
by Aquarium (@aquarium)
on CodePen.

サンプル2

ラジボタン CSSデザインサンプル

背景色をつけ、押しやすさを向上させたラジオボタン。

HTML&CSS

See the Pen
css form-step02
by Aquarium (@aquarium)
on CodePen.

サンプル3

ラジボタン CSSデザインサンプル

色を反転させたラジオボタン

See the Pen
form-step03
by Aquarium (@aquarium)
on CodePen.

理解を深める

ui_radio_button_210515_04

3つのHTMLで構成されています

一見、複雑に見えるラジオボタンのデザインですが、たった3つの要素で構成されています。

HTML

  • <label> 項目名をクリック対象にするため
  • <input> 必須機能。デフォルトデザインは非表示にする
  • <span> 項目名をラップ。CSSはここで整えます

CSS

  • input[type="radio"] ラジオボタン。非表示にします。
  • input[type="radio"] + span 項目全体を包括。メインとなるもの
  • input[type="radio"] + span::before ラジオボタンの外枠
  • input[type="radio"] + span::after ラジオボタンの内枠

CSS チェック時

  • input[type="radio"]:checked + span::before チェックしたときの外枠
  • input[type="radio"]:checked + span::after チェックしたときの内枠

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加