CSS(CSS3) を使ってチェックボックスをデザインする設定方法

11.07.17 23:47 | コメント(0)

チェックボックスをデザインする設定方法

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

チェックボックス

チェックボックス サンプルページはこちら

 1. チェックボックスのボックスをデザインする設定方法
 2. チェックボックスを四角いボタンの様にデザインする設定方法

チェックボックスのボックスをデザインする設定方法

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

【htmlファイルに記述】
<div class="list">
<dl>
<dt><label>選択</label></dt>
<dd>
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="Group1_0" /><label for="Group1_0" class="checkbox01">申し込み</label>
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="Group1_1" /><label for="Group1_1" class="checkbox01">お見積もり</label>
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="Group1_2" /><label for="Group1_2" class="checkbox01">資料請求</label>
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="Group1_3" /><label for="Group1_3" class="checkbox01">お問い合わせ</label>
<input type="checkbox" name="CheckboxGroup1" value="チェックボックス" id="Group1_4" /><label for="Group1_4" class="checkbox01">その他</label>
</dd>
</dl>
</div>

【cssファイルに記述】
/* checkbox01 */
input[type=checkbox] {
	display: none;
}
.checkbox01 {
	position: relative;
	line-height:2.6;
	padding: 0 20px 0 27px;
}
.checkbox01:hover:after {
	border-color: #0171bd;
}
.checkbox01:after, .checkbox01:before{
	position: absolute;
	content: ""; 
	display: block;
	top: 50%;
}
.checkbox01:after {
	left: 0;
	margin-top: -12px;
	width: 18px;
	height: 18px;
	border: 2px solid #d1d1d1;
}
.checkbox01:before {
	left: 6px;
	margin-top: -9px;
	width: 7px;
	height: 11px;
	border-right: 3px solid #0171bd;
	border-bottom: 3px solid #0171bd;
	transform: rotate(45deg);
	opacity: 0;
}
input[type=checkbox]:checked + .checkbox01:before {
	opacity: 1;
}

チェックボックスを四角いボタンの様にデザインする設定方法

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

【htmlファイルに記述】
<div class="list">
<dl>
<dt><label>選択</label></dt>
<dd>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_0" class="checkbox02" /><label for="Group2_0" class="check_label">申し込み</label>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_1" class="checkbox02" /><label for="Group2_1" class="check_label">お見積もり</label>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_2" class="checkbox02" /><label for="Group2_2" class="check_label">資料請求</label>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_3" class="checkbox02" /><label for="Group2_3" class="check_label">お問い合わせ</label>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_4" class="checkbox02" /><label for="Group2_4" class="check_label">その他</label>
</dd>
</dl>
</div>

【cssファイルに記述】
/* checkbox02 */
input[type=checkbox] {
	display: none;
}
input[type="checkbox"].checkbox02:checked + label {
	background: #31A9EE;
	color: #ffffff;
}
.check_label:hover {
	background-color: #E2EDF9;
}
.check_label {
	display: block;
	float: left;
	margin: 5px;
	width: 100px;
	height: 45px;
	text-align: center;
	line-height: 45px;
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
	color: #31A9EE;
	border: 2px solid #006DD9;
	border-radius: 5px;
}


以上で CSS(CSS3) を使ってチェックボックスをデザインする設定方法になります。
カテゴリ:CSS3, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術

Facebookでコメントする

コメントする

おすすめの記事

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

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

PAGE TOP