Sometimes when we create forms, we need to use checkbox and radio button inputs to collect user preferences, agreeing to terms, or demographic data. HTML input elements like checkboxes or radio buttons have a default appearance. If you would like to alter the appearance at all, you can use CSS to customize a look to your liking. This article will show you a sample of how to customize a checkbox and a radio input for your form or web page.
HTML Setup
The HTML skeleton code that we will style is basically the same for both checkboxes and radio buttons.
Our main container for one checkbox/radio button will be the HTML label element. Inside that label, we’ll have an input element with its appropriate type and a span element that will show whether or not the element has been selected.
<html>
<head>
<style>
/* No CSS Here Yet. */
</style>>
</head>
<body>
<h2>Radio Button and Checkbox CSS Example</h2>
<label class="input">One
<input type="radio" name="radio-example" checked="checked">
<span class="checkmark fill"></span>
</label>
<label class="input">Two
<input type="radio" name="radio-example">
<span class="checkmark fill"></span>
</label>
<label class="input">Three
<input type="radio" name="radio-example">
<span class="checkmark fill"></span>
</label>
<h2>Checkbox Example</h2>
<label class="input">Four
<input type="checkbox" name="radio-example">
<span class="checkmark fill"></span>
</label>
<label class="input">Five
<input type="checkbox" name="radio-example">
<span class="checkmark fill"></span>
</label>
<script href="script.js"></script>
</body>
</html>The first set of inputs in the markup above are radio buttons. You’ll use radio buttons for forms when a user needs to choose only one selection from multiple choices.
The second set is checkboxes. Checkboxes are used when users can select multiple choices if they’d like from a selection of choices. They are also used at points where a user just needs to either agree/disagree or yes/no to something.
These HTML elements have default appearances. If you’d like to customize them, you can certainly do that though! You can use CSS to adjust the style:
CSS Setup
In order to change up the styling of your radio buttons or your checkboxes, you have to break down the problem in the following steps:
- Customize the label
- Display property
- Position relative
- Cursor pointer
- Margin and padding to make it aesthetically pleasing
- Hide the default checkbox
- Display property
- Create a container that will be the custom checkbox
- Height
- Width
- Background
- Position – absolute
- Top, left values set
- Add something special that will happen on hover (i.e. change background color of the checkbox)
- Change background color when box or button is checked
- Hide checkmark or circle when not checked
- Show checkmark or circle when checked
- Style the checkmark
- Style the circle
Before looking at the code below, I would recommend trying to figure it out on your own given the skeleton HTML and the breakdown of steps to solve the problem above.
Solution Code:
<html>
<head>
<style>
/* Customize the label (the input) */
label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox container */
.checkmark, .link {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* Add border radius for the radio button */
.circle {
border-radius: 50%;
}
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark */
label .checkmark:after {
left: 10px;
top: 3px;
width: 5px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
/* always check to see if you need to use the css browser prefixes */
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style the radio button circle */
label .circle:after {
width: 15px;
height: 15px;
/* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
border: none;
background: white;
border-radius: 50%;
left: 20%;
top: 20%;
}
</style>
</head>
<body>
<h2>CSS Radio Button and Checkbox Example</h2>
<label class="input">One
<input type="radio" name="radio-example" checked>
<span class="checkmark circle"></span>
</label>
<label class="input">Two
<input type="radio" name="radio-example">
<span class="checkmark circle"></span>
</label>
<label class="input">Three
<input type="radio" name="radio-example">
<span class="checkmark circle"></span>
</label>
<h2>Checkbox Example</h2>
<label class="input">Four
<input type="checkbox" name="radio-example" checked>
<span class="checkmark"></span>
</label>
<label class="input">Five
<input type="checkbox" name="radio-example">
<span class="checkmark"></span>
</label>
<label class="input">Six
<input type="checkbox" name="radio-example">
<span class="checkmark"></span>
</label>
</body>
</html>There you have it; examples of radio buttons and checkboxes in CSS. This may be a bit to wrap your mind around at first, but you’ll get it! If you’re able to get through this CSS exercise, you’re ready to forge ahead to more difficult topics.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
