Styling checkbox and radio buttons using css

Styling checkbox and radio buttons using css

6 min. read

HTML markup

<!DOCTYPE html>
<html>
	<head>
		<title>Styling checkbox and radio buttons using css</title>
	</head>

	<body>
		<div id="checkboxes">
			<div class="lb">Checkboxes</div>
			<label>
				<input type="checkbox"><div class="ch"></div>Checkbox 1
			</label>

			<label>
				<input type="checkbox"><div class="ch"></div>Checkbox 2
			</label>
		</div>
			
		<div id="rbtns">
			<div class="lb">Radio buttons</div>
			<label>
				<input type="radio" name="radio"><div class="rd"></div>Radio button 1
			</label>
			<label>
				<input type="radio" name="radio"><div class="rd"></div>Radio button 2
			</label>
		</div>
	</body>
</html>

In the html markup we have used same value for name attribute of radio buttons in order to form their pair.

CSS rules

Styling the body element

body
{ 
	margin:0px; /* Remove the default 8px margin */
	padding:80px;
	font-size:21px;
	font-family:Helvetica,arial,sans-serif;
}

Aligning div#checkboxes & div#rbtns elements to center of webpage and styling the label elements.

#checkboxes,#rbtns
{
	width:300px;
	margin:0 auto;
}

#rbtns
{
	margin-top:30px;
}

.lb
{
	font-size: 26px;
	font-weight: bold;
	padding: 10px 0px;
	color: #503830;
}

label
{
	display:block;
	color:#a9a9a9;
	cursor:pointer;
	margin-bottom:12px;
}

Clearing floating on label elements, this is required because div.ch & div.rd child elements of label element will be left floated.

label:after
{
	content:'.';
	clear:both;
	display:block;
	height:0px;
	visibility:hidden;
}

Hiding the checkbox & radio buttons and styling div.ch & div.rd elements. div.ch & div.rd elements are placeholders for checkbox and radio buttons respectively.

input[type="checkbox"],input[type="radio"]
{
	display:none;
}

.ch,.rd
{
	width:18px;
	height:18px;
	padding:3px;
	position:relative;
	margin-right:7px;
	background-color:#efeded;
	float:left;
}

.ch
{
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
}
	
.rd
{
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
}

See result in the fiddle below

Working with checkbox.

Creating tick mark inside the checkbox placeholder div.ch elements.

.ch:before,.ch:after
{
	content: '';
	background-color: #fff;
	position: absolute;
	width: 4px;
}

.ch:before
{
	height: 9px;
	left: 7px;
	top: 9px;

	transform: rotateZ(-40deg);
	-webkit-transform: rotateZ(-40deg);
	-moz-transform: rotateZ(-40deg);
	-o-transform: rotateZ(-40deg);
	-ms-transform: rotateZ(-40deg);
}

.ch:after
{
	height: 13px;
	right: 8px;
	top: 6px;

	transform: rotateZ(50deg);
	-webkit-transform: rotateZ(50deg);
	-moz-transform: rotateZ(50deg);
	-o-transform: rotateZ(50deg);
	-ms-transform: rotateZ(50deg);
}

See result in the fiddle below

Hiding the tick mark inside the checkbox placeholder div.ch elements.

.ch:before,.ch:after
{
	display:none;
}

Using this above css the result will look like the first fiddle.

Main css part for checkbox

The tick marks inside div.ch elements are hidden, so when checkbox is selected display the associated tick mark.

#checkboxes input[type="checkbox"]:checked + .ch:before,
#checkboxes input[type="checkbox"]:checked + .ch:after
{
	display:block;
}

Above css tells that when a checkbox is selected ( checked ) then display the :before & :after elements of it's adjacent div.ch element.

" + " is adjacent sibling selector.

Click here to read more about adjacent sibling selectors

Changing background color and applying click effect on div.ch placeholder element when checkbox is selected.

#checkboxes input[type="checkbox"]:checked + .ch
{
	background-color:#00BCD4;
}

#checkboxes label:active input[type="checkbox"] + .ch
{
	box-shadow:0 0 0 0.2em rgba(0, 188, 212, 0.16);
	-webkit-box-shadow:0 0 0 0.2em rgba(0, 188, 212, 0.16);
	-moz-box-shadow:0 0 0 0.2em rgba(0, 188, 212, 0.16);
	-o-box-shadow:0 0 0 0.2em rgba(0, 188, 212, 0.16);
	-ms-box-shadow:0 0 0 0.2em rgba(0, 188, 212, 0.16);
}

Preventing the click effect when checkbox is going to be unchecked.

#checkboxes label:active input[type="checkbox"]:checked + .ch
{
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-o-box-shadow:none;
	-ms-box-shadow:none;
}

See final checkbox in the fiddle below

Now, working with radio buttons.

Creating the design for selected radio button

.rd:before
{
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	width: 12px;
	height: 12px;
	background-color: #fff;
	border: 6px solid #4CAF50;

	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
}

Applying the above css, fiddle below shows how the selected radio button will look like.

Hiding the green circle design ( .rd:before ) that we created in above step, as it need to be only visible when radio button is selected.

.rd:before
{
	transform:scale(0,0);
	-webkit-transform:scale(0,0);
	-moz-transform:scale(0,0);
	-o-transform:scale(0,0);
	-ms-transform:scale(0,0);

	transition: 0.2s ease transform;
	-webkit-transition: 0.2s ease transform;
	-moz-transition: 0.2s ease transform;
	-o-transition: 0.2s ease transform;
	-ms-transition: 0.2s ease transform;

}

After applying above css transform:scale(0,0) will reduce the size of green circle design to 0px * 0px ( it will become invisible ), transition: 0.2s ease transform will ensure that when radio button is selected or de-selected the green circle design will appear or disappear in 0.2 seconds, not instantly.

Applying above css will hide the green circle design and radio button will look like as same as before ( light grey circle ).

Show the green circle design when radio button is selected.


#rbtns input[type="radio"]:checked + .rd:before
{
	transform:scale(1,1);
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	-o-transform:scale(1,1);
	-ms-transform:scale(1,1);
}

Above css tells that when a radio button is selected then display the green circle design on it's adjacent div.rd element.

When radio button is selected then because of transform : scale(1,1) css rule the green circle design ( .rd:before ) will grow to its full size and this will happen in 0.2 seconds because of transition : 0.2s ease transform css rule applied to it.

See final radio button and checkbox in the fiddle below

Write comments