CSS

【CSS】CSS3チェックボックスとラジオボタンCheckbox CSS3

March 29, 2017
checkbox css3

Checkbox CSS3はChrome、Firefox、Safariなどの最新のブラウザをサポート。

HTML

<div class="wrapper">
		<div class="c-checkbox">
			<input type="checkbox" id="checkbox1" class="c-check">
			<label for="checkbox1">
				<span class="inc"></span>
				<span class="check"></span>
				<span class="box"></span> Checkbox 
			</label>
		</div>
		<div class="c-checkbox border">
			<input type="checkbox" id="checkbox2" class="c-check">
			<label for="checkbox2">
				<span class="inc"></span>
				<span class="check"></span>
				<span class="box"></span> Checkbox 
			</label>
		</div>
		<div class="c-radio">
			<input type="radio" id="radio1" class="c-radio" name="radios3">
			<label for="radio1">
				<span class="inc"></span>
				<span class="box"></span> Radio
			</label>
		</div>
		<div class="c-radio">
			<input type="radio" id="radio2" class="c-radio" name="radios3">
			<label for="radio2">
				<span class="inc"></span>
				<span class="box"></span> Radio
			</label>
		</div>
	</div>

MIT