CSSでラジオボタンをデザインする設定方法
投稿日：2021.03.12.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
近年メールフォーム周りのデザインがオシャレにデザインされているサイトが増えてきました。
メールフォームはテキスト入力、チェックボックスなど様々な入力方法で構成されています。
今回はその中からラジオボタンのデザイン変更方法について紹介します。
ラジオボタンの色を変える
■HTML
<input id="g1" checked="checked" name="radio01" type="radio" /><label class="radio01" for="g1">リンゴ</label><br>
<input id="g2" name="radio01" type="radio" /><label class="radio01" for="g2">ミカン</label><br>
<input id="g3" name="radio01" type="radio" /><label class="radio01" for="g3">バナナ</label>■css
input[type=radio] {
display: none;
}
.radio01 {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 5px 30px;
position: relative;
width: auto;
}
.radio01::before {
background: #fff;
border: 1px solid #183c30;
border-radius: 50%;
content: '';
display: block;
height: 16px;
left: 5px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 16px;
}
.radio01::after {
background: #7aedc8;
border-radius: 50%;
content: '';
display: block;
height: 10px;
left: 9px;
margin-top: -4px;
opacity: 0;
position: absolute;
top: 50%;
width: 10px;
}
input[type=radio]:checked + .radio01::after {
opacity: 1;
}
input[type="radio"],input[type="checkbox"]{
position: relative;
top: 2px;
}
