【html】チェックボックスのサイズ変更【備忘】

f:id:ponpy0914:20160414145846j:plain
スマホ開発していた時にチェックボックスがデフォルトのままだと小さく、押しにくい。よってチェックボックスを大きくする必要がある。

CSSを使うことになるのだが、細かく覚えてなかったので参考サイトで確認した内容を忘れないようにコメント追記して残させていただく。

〇通常のチェックボックス

チェックボックス

<input type="checkbox" >チェックボックス

〇大きいチェックボックス

チェックボックス

<div class="chkbox">
    <input id="chkbox3" name="chkbox3" type="checkbox" value="1" /> 
    <label for="chkbox3">チェックボックス</label>
</div>
<style>
/* ラベルのスタイル　*/
.chkbox label {
	padding-left:		38px;		/* ラベルの位置 */
	font-size:		32px;		/* ラベルのフォントサイズ */
	line-height:		32px;		/* ラベルの高さ調整 */
	cursor:			pointer;	/* マウスカーソル表示 */
	position:		relative;	/* 相対位置として表示 */
}

/* チェックボックスのスタイル */
.chkbox label:before {
	content:		'';		/* チェック内の文字 */
	width:			32px;		/* チェックの横幅 */
	height:			32px;		/* チェックの縦幅 */
	position:		absolute;	/* 絶対位置として表示 */
	left:			0px;		/* 左からの配置距離 */
	background-color:	white;	        /* チェック内の背景色 */
	box-shadow:		inset 1px 2px 3px 0px #000; /* チェック内の影色 */
	border-radius:		6px 6px 6px 6px;	    /* チェックの角丸み */
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {display:none;}

/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
	content:	'\2713';	/* チェック内の文字 \2713 is checkmark */ 
	font-size:	34px;		/* チェック内のサイズ */
	color:		white;		/* チェックの色 */
	background-color:red;		/* チェック時の背景色 */
}
</style>