CSS

【CSS】チェックボックスとラジオボックススタイルCheckbox-And-Radiobox-CSS

August 26, 2018
Checkbox-And-Radiobox-CSS

Checkbox-And-Radiobox-CSSはチェックボックスとラジオボックススタイル

Style CSS

<link rel="stylesheet" href="checkbox-radiobox.css">

HTML

Checkbox

<div class="md-checkbox">
	<input type="checkbox" id="idCheckbox1">
	<label for="idCheckbox1">
		<span class="check"></span>
		<span class="box"></span>
		Option 1
	</label>
</div>

<div class="md-checkbox">
	<input type="checkbox" id="idCheckbox2">
	<label for="idCheckbox2">
		<span class="check"></span>
		<span class="box"></span>
		Option 2
	</label>
</div>

Radiobox

<div class="md-radio">
	<input type="radio" id="idRadio1" name="radio1">
	<label for="idRadio1">
		<span class="check"></span>
		<span class="box"></span>
		Option 1
	</label>
</div>

<div class="md-radio">
	<input type="radio" id="idRadio2" name="radio1">
	<label for="idRadio2">
		<span class="check"></span>
		<span class="box"></span>
		Option 2
	</label>
</div>