Home > UI/UX Development > CSS > Custom Style for check boxes and radio button using CSS

Custom Style for check boxes and radio button using CSS

Aarti Khairnar CSS, HTML, UI/UX Development 0

This post was most recently updated on July 29th, 2024

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form>
<h2>CSS Radio Buttons and Checkboxes: Custom icon</h2>
<h5>Checkboxes and radio buttons with a custom tick icon: Pure CSS.</h5>
<p><em>Uses Font Awesome for demo.</em></p>
<br>
<h3>Radio Buttons</h3>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
<h3>Checkboxes</h3>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
<div>
<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
<label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>
</div>
</div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* only demo styles */
body {
font-family: Raleway;
}
/* end only demo styles */
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: rebeccapurple;
color: #fff;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: #bbb;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}

Download Demo here

Tested on: Chrome,Firefox,Edge, Internet Explorer 9+.

This Article is TAGGED in , . BOOKMARK THE permalink.

Aarti Khairnar

Related articles

Callbacks in jQuery

Hello everyone, in this post we will discuss about following points on JavaScript

Web Storage in HTML5

Web Storage Using Web Storage we can store data within web browser. Within Web

JavaScript: What is the use of slice() array method?

Definition: slice(): this array method is used to slice out specific portion

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">