Webデザイナーブログから学ぶホームページ制作

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

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

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

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

<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>

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

<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>

.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;
}

html5やcss3が現れる前は、ラジオボタンやチェックボックスといったフォームで利用する機能は装飾するのは困難でしたが、html5やcss3が利用できるようになり、ラジオボタンやチェックボックスなどフォームで利用する機能が自由に装飾できデザインできるようになり幅が広がりましたね。