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

【CSS】チェックボックスとラジオボタンのスタイル指定(ボタンの後ろにテキスト & テキストなし)

Pocket
LINEで送る

チェックボックスとラジオボタンのスタイル指定で、ボタンの後ろにテキストが入るパターンとテキストが入らないパターン。

html

<h1>ラジオボタン</h1>
<div id="redioBox">
	<label class="radio_text">
		<input name="radioTest" value="1" type="radio">ラジオボタン1
	</label>
	
	<label class="radio_text">
		<input name="radioTest" value="2" type="radio">ラジオボタン2
	</label>
	
	<label class="radio_text inactive">
		<input name="radioTest" value="3" type="radio" disabled>ラジオボタン3
	</label>
	
	<h2>テキストなし</h2>
	<label class="radio">
		<input type="radio" name="radioTest2" value="1">
	</label>
	
	<label class="radio">
		<input type="radio" name="radioTest2" value="2">
	</label>
</div>

<h1>チェックボックス</h1>
<div id="checkBox">
	<label class="checkbox_text">
		<input name="checkTest" value="1" type="checkbox">チェックボックス1
	</label>
	
	<label class="checkbox_text">
		<input name="checkTest2" value="2" type="checkbox">チェックボックス2
	</label>
	
	<label class="checkbox_text inactive">
		<input name="checkTest3" value="3" type="checkbox" disabled>チェックボックス3
	</label>
	
	<h2>テキストなし</h2>
	<label class="checkbox">
		<input type="checkbox" name="checkTest4" value="4">
	</label>
	
	<label class="checkbox">
		<input type="checkbox" name="checkTest5" value="5">
	</label>
</div>

scss

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

h2 {
	margin: 0;
	padding: 20px 0 10px 0;
	font-size: 14px;
}

#redioBox,
#checkBox {
	padding: 0 20px;
}

// ラジオボタン(テキストあり)
label.radio_text {
	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding-left: 20px;
	margin-right:20px;
	display: inline-block;
	font-size: 16px;
	
	&.inactive {
		color: #ccc;
	}
	
	&:before {
		position: absolute;
		width: 14px;
		height: 14px;
		border: 1px solid #ccc;
		border-radius: 50%;
		left: 0;
		top: 0px;
		content: '';
		z-index: 3;
	}
	
	&:after {
		content: '';
		position : absolute;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		left: 3px;
		top: 3px;
		background-color: #068d39;
		z-index: 1;
	}
	
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		position: absolute;
		z-index: 2;
		width: 19px;
		height: 15px;
		left: -19px;
		top: 0px;
		margin: 0;
		box-shadow: 18px -1px #FFF;
		border-radius:9px;
		
		&:checked {
			box-shadow: none;
		}
		
		&:focus {
			opacity: 0.2;
			box-shadow: 16px -1px #FFF;
		}
	}
}

// ラジオボタン(テキストなし)
/*Radioのみ*/
label.radio {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #ccc;
	border-radius: 100%;
	overflow: hidden;
	cursor: pointer;
	
	&:before {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		position: absolute;
		top: 2px;
		left: 2px;
		z-index: 1;
		background-color: #068d39; 
	}
	
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		margin: 0px;
		position: absolute;
		z-index: 2;
		top: -2px;
		left: -23px;
		width: 20px;
		height: 20px;
		display: block;
		box-shadow: 20px 0px #FFF;
		
		&:checked {
			box-shadow: none;
		}
		
		&:focus {
			box-shadow: 20px 0px #FFF;
			opacity: 0.2;
		}
	}
}

// チェックボックス(テキストあり)
label.checkbox_text {
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 20px;
	overflow: hidden;
	position: relative;
	padding-left: 23px;
	display: inline-block;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1;

	&.inactive {
		color: #ccc;
	}

	&:before {
		content: '';
		position: absolute;
		width: 14px;
		height: 14px;
		left: 0;
		top: 0px;
		border: 1px solid #ccc;
		z-index: 3;
	}

	&:after {
		content: '';
		position: absolute;
		top: 7px;
		left: 6px;
		display: block;
		margin-top: -6px;
		width: 2px;
		height: 10px;
		border-right: 3px solid #2e13f5;
		border-bottom: 3px solid #2e13f5;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		z-index: 1;
	}

	input[type="checkbox"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		position   : absolute;
		top:2px;
		left: -45px;
		width: 20px;
		height: 12px;
		display: block;
		box-shadow: 41px 0px #FFF;
		z-index: 2;
		margin: 0;
		padding: 0;

		&:checked {
			box-shadow: none;

			&:focus {
			  box-shadow: 40px 0px #fff;
			  opacity: 0.1;
			}
		}

		&:focus {
			box-shadow: 41px 0px #fff;
		}
	}
}

// テキストボックス(テキストなし)
label.checkbox {
	cursor: pointer;
	width: 15px;
	height: 15px;
	border: 1px solid #ccc;
	background: #fff;
	overflow: hidden;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	
	input[type="checkbox"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		margin: 0;
		padding: 0;
		position: absolute;
		left: 20px;
		width: 15px;
		height: 15px;
		left: -40px;
		box-shadow: 39px 0px #FFF;
		z-index: 2;
		
		&:checked {
			box-shadow: none;
			
			&:focus {
				box-shadow: 39px 0px #fff;
				opacity: 0.1;
			}
		}
		
		&:focus {
			box-shadow: 39px 0px #fff;
		}
	}
	
	&:after {
		content: '';
		position: absolute;
		top: 7px;
		left: 4px;
		display: block;
		margin-top: -8px;
		width: 2px;
		height: 10px;
		border-right: 3px solid #2e13f5;
		border-bottom: 3px solid #2e13f5;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		z-index: 1;
	}
}

参考サイト

カテゴリー:HP制作, css

コメントを残す

コメント内容