css style input radio code example

Example 1: checked radio button css

//html
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>\

//css
input[type="radio"]:checked+label { font-weight: bold; }

Example 2: checkbox style css

<div>
		<label>Checkbox Small</label>
		<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
		<nput type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
	</div>
	<div>
		<label>Checkbox Big</label>
		<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" />
	</div>
	<div>
		<label>Radio Small</label>
		<div class="button-holder">
			<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
			<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" />
		</div>
	</div>
	<div>
		<label class="radio-1">Radio Big</label>
		<div class="button-holder">
			<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked />
			<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" />
		</div>
	</div>

Tags:

Css Example