【HTML/CSS】ラジオボタンのカスタマイズ

<fieldset>
	<legend>Radio</legend>
	<input type="radio" class="radioCheck" id="test1-1" name="test1" value="1" /><label class="radioLabel" for="test1-1">test1-1</label>
	<input type="radio" class="radioCheck" id="test1-2" name="test1" value="2" /><label class="radioLabel" for="test1-2">test1-2</label>
	<input type="radio" class="radioCheck" id="test1-3" name="test1" value="3" /><label class="radioLabel" for="test1-3">test1-3</label>
</fieldset>

<fieldset>
	<legend>Checkbox</legend>
	<input type="checkbox" class="radioCheck" id="test2-1" name="test2" value="1" /><label class="radioLabel" for="test2-1">test2-1</label>
	<input type="checkbox" class="radioCheck" id="test2-2" name="test2" value="2" /><label class="radioLabel" for="test2-2">test2-2</label>
	<input type="checkbox" class="radioCheck" id="test2-3" name="test2" value="3" /><label class="radioLabel" for="test2-3">test2-3</label>
</fieldset>

.radioCheck {
	/** 選択状態の○や□を消す **/
	display: none; 
}

/** 未選択時のデザイン **/
.radioLabel {
	color: #b20000;
	font-size: 10pt;
	text-align: center;
	cursor: pointer;
	border: 1px solid #deb887;
	border-radius: 5px;

	background: linear-gradient(to bottom  , #fffacd, #f5deb3 70%);
}

/** 選択時のデザイン（チェックされたボタンの次に存在するLabelタグに対して指定する） **/
.radioCheck:checked + label {
	color: #ffffff;
	background: linear-gradient(to bottom  , #ff0000, #dc143c 70%);
}

/** オンマウス時のデザイン **/
.radioLabel:hover {
	color: #FFFFFF;
	background: #E2EDF9;
}

/** 先頭に常に表示する文字。ラジオとチェックの判断ができるように **/
input[type="radio"].radioCheck + label:before {
	content: "●"
}
input[type="checkbox"].radioCheck + label:before {
	content: "■"
}