CSS(CSS3) を使ってラジオボタンをデザインする設定方法

06.07.17 02:20 | コメント(0)

ラジオボタンをデザインする設定方法

お問い合わせフォームや、登録フォームといったフォームを利用する際、「ラジオボタン」や「チェックボックス」を利用するときは多くありますが、デザイン性を持たせたり、スタイリッシュなデザインを求め、少し変化を加えたい時はCSS(スタイルシート)を使ってデザイン性を持たせることが出来ます。
ひと昔であれば「ラジオボタン」や「チェックボックス」にデザイン性を加えるなどと言った事は、あまり考える人もいませんでした。 「html5」や「css3」が登場したことが切っ掛けに今まで行わなかった所にもデザイン性を持たせることが出来るようになりました。 今回はCSS(CSS3) を使って「ラジオボタン」をデザインする設定方法をご紹介いたします。

ラジオボタン

ラジオボタン サンプルページはこちら

 1. ラジオボタンの丸をデザインする設定方法
 2. ラジオボタンを四角いボタンの様にデザインする設定方法

ラジオボタンの丸をデザインする設定方法

label」要素と、「input」要素で設定します。
通常通りラジオボタンをhtmlに記載し、cssでボタンを一度「display: none;」で非表示設定を行います。
非表示にした状態からcssにラジオボタンをデザインしていきます。 ※グループ化するには、idとforを紐付けないといけません。

【htmlファイルに記述】
<div class="list">
<ul>
<li><input type="radio" name="radio01" class="radio01" id="radio01-1"><label for="radio01-1">電話</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-2"><label for="radio01-2">FAX</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-3"><label for="radio01-3">来社</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-4"><label for="radio01-4">お問い合わせ</label></li>
</ul>
</div>

【cssファイルに記述】
.radio01{
  display: none;
}
.radio01 + label{
  padding-left: 22px;
  position:relative;
  margin-right: 22px;
}
.radio01 + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio01:checked + label{
  color: #009a9a;
}
.radio01:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  background: #0171bd;
  border-radius: 50%;
}

ラジオボタンを四角いボタンの様にデザインする設定方法

こちらもまた「label」要素と、「input」要素で設定します。
通常通りラジオボタンをhtmlに記載し、cssでボタンを一度「display: none;」で非表示設定を行います。
非表示にした状態からcssにラジオボタンを四角いボタンにデザインしていきます。 ※グループ化するには、idとforを紐付けないといけません。

【htmlファイルに記述】
<div class="radio02">
<input name="test" id="select1" value="1" checked="" type="radio"><label for="select1">電話</label>
<input name="test" id="select2" value="2" type="radio"><label for="select2">FAX</label>
<input name="test" id="select3" value="3" type="radio"><label for="select3">来社</label>
<input name="test" id="select4" value="4" type="radio"><label for="select4">お問い合わせ</label>
</div>

【cssファイルに記述】
.radio02{
	clear:both;
}
.radio02 input{
	display: none;
}
.radio02 label{
	display: block;
	float: left;
	cursor: pointer;
	width: 200px;
	margin: 1px 0 1px 0;
	padding: 1.4% 0 1.5% 0;
	border-right: 1px solid #d7d7d7;
	background: #e5e5e5;
	color: #555e64;
	font-size: 14px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.radio02 label:first-of-type{
}
.radio02 label:last-of-type{
	border-right: 0px;
}
.radio02 input[type="radio"]:checked + label {
	background-color: #a1b91d;
	color: #fff;
}



以上で CSS(CSS3) を使ってラジオボタンをデザインする設定方法になります。
カテゴリ:CSS3, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術, ホームページ(WEB)制作と作成方法

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP