CSSでチェックボックスにデザイン性を持たせて配置する方法

2022.2.28｜コーディング

お問い合わせフォームや、登録フォームといったフォームを利用する時に配置する「チェックボックス」に、デザイン性を持たせたり、スタイリッシュなデザインを求め、少し変化を加えたい時は、CSSを使って設定することができます。
「html5」や「css3」が登場したことが切っ掛けに、「ラジオボタン」や「チェックボックス」にデザイン性を加える事が出来る様になりましたね。「チェックボックス」カスタマイズするためには、通常時に設定している標準スタイルを非表示に設定する事でデザイン性を持たせることができます。

今回は、CSSでチェックボックスにデザイン性を持たせる配置する方法を解説します。

CSSでチェックボックスにデザイン性を持たせる配置する方法

CSSでチェックボックスにデザイン性を持たせる場合は、「チェックボックス」の機能を非表示にする必要があります。CSSで「input[type=checkbox]」に「display:none;」要素を記述して、チェックボックスを非表示にしてからデザインを設計します。

チェックボックスを大きくして配置するデザイン

htmlに「input」と「label」を記述してチェックボックスを配置します。
配置したチェックボックスは「input」と「label」を記述しますが、inputタグの「id属性」とlabelタグの「for属性」を同じ値にすることでチェックボックスとテキストを紐付ける事ができます。
「name属性」には、チェックボックスのグループを指定する名前を記述します。

例

選択: 申し込みお見積もり資料請求お問い合わせ

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>
</dd>
</dl>
</div>

CSSの記述

.list{
	float:left;
	width: 100%;
	margin:0 0 50px 0;
	border-spacing: 0;
}
.list dl{
	width: 100%;
	border:1px solid #e4e4e4;
}
.list dl dt{
	width: 10%;
	padding:2%;
	display:inline-block;
	vertical-align:middle;
}
.list dl dd{
	width: 81%;
	padding:2%;
	display:inline-block;
	vertical-align:middle;
	border-left:1px dotted #e4e4e4;
}
.list dl.disabled,
.list dl:disabled{
	background:#efefef;
	cursor:not-allowed;
}
/* 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;
}

チェックボックスを四角いボタンにして配置するデザイン

例

選択: 申し込みお見積もり資料請求お問い合わせ

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>
</dd>
</dl>
</div>

CSSの記述

.list{
	float:left;
	width: 100%;
	margin:0 0 50px 0;
	border-spacing: 0;
}
.list dl{
	width: 100%;
	border:1px solid #e4e4e4;
}
.list dl dt{
	width: 10%;
	padding:2%;
	display:inline-block;
	vertical-align:middle;
}
.list dl dd{
	width: 81%;
	padding:2%;
	display:inline-block;
	vertical-align:middle;
	border-left:1px dotted #e4e4e4;
}
.list dl.disabled,
.list dl:disabled{
	background:#efefef;
	cursor:not-allowed;
}
/* 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: 120px;
	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;
}