さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】チェックボックスとラジオボタンのスタイル指定

Pocket
LINEで送る

チェックボックスとラジオボタンは普通にはスタイル指定することが出来ないので、labelを利用してスタイル指定を反映させる。

html

<h1>ラジオボタン</h1>
<div id="redioBox">
	<input id="radioTest" name="radioTest" type="radio">
	<label for="radioTest"><span>ラジオボタン1</span></label>
	
	<input id="radioTest2" name="radioTest" type="radio">
	<label for="radioTest2"><span>ラジオボタン2</span></label>
	
	<input id="radioTest3" name="radioTest" type="radio" disabled>
	<label for="radioTest3"><span>ラジオボタン3</span></label>
</div>

<h1>チェックボックス</h1>
<div id="checkBox">
	<input id="checkTest" name="checkTest" type="checkbox">
	<label for="checkTest"><span>チェックボックス1</span></label>
	
	<input id="checkTest2" name="checkTest" type="checkbox">
	<label for="checkTest2"><span>チェックボックス2</span></label>
	
	<input id="checkTest3" name="checkTest" type="checkbox" disabled>
	<label for="checkTest3"><span>チェックボックス3</span></label>
</div>

scss

h1 {
	margin: 0;
	padding: 20px 0 10px 0;
	font-size: 16px;
}

input {
	display: none;
}

label {
	display: inline-block;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	font-size: 14px;
	position: relative;
	width: 200px;
	height: 50px;
	margin-right: 10px;
	
	&:last-child {
		margin-right: 0;
	}
	
	span {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	// 通常時
	&:before {
		display: inline-block;
		content: "";
		box-sizing: border-box;
		border-radius: 10px;
		border: 2px solid #ccc;
		background-color: #fff;
		width: 200px;
		height: 50px;
	}
}

// チェック時
input:checked {
	& + label:before {
		opacity: 1;
		border: 2px solid #F33;
		background-color: #F5C2C2;
	}
}

// ホバー時
input + label:hover:before,
input:checked + label:hover:before {
	opacity: 0.7;
}

input:disabled {
	& + label:before {
		border: 2px solid #ccc;
		background-color: #ddd;
	}
	
	& + label {
		span {
			color: #999;
		}
		
		&:hover {
			cursor: default;
			
			&:before {
				opacity: 1;
			}
		}
	}
}

カテゴリー:css, HP制作

コメントを残す

コメント内容