Tweet

Pocket

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

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

参考サイト

• CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。 – nanndemoiikara’s diary