Table of Contents
- Introduction
- Include Radios and Checkboxes in HTML (index.html)
- Style radios and checkboxes into buttons in CSS (styles.css)
- Video Tutorial
Introduction
We can convert radios and checkboxes into buttons by using HTML and CSS only. There is no need of JavaScript and the buttons will function the same as radio buttons and checkboxes.
Below is the demo project image.
Include Radios and Checkboxes in HTML (index.html)
The HTML for this project is pretty simple. We have some radio buttons and checkboxes which will be converted into buttons. Make sure to set the value for “for” attribute in label and “id” attribute in input same for this to work. Learn More: About HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convert Radio into Buttons</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="buttons-container">
<h2>Example Radio and Checkbox Buttons</h2>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<!-- Make sure to have same value in "for" and "id" attributes in label and input respectively, for this to work -->
<div class="form-group">
<input type="radio" name="gender" value="Male" id="male" checked>
<label for="male"> Male</label>
</div>
<div class="form-group">
<input type="radio" name="gender" value="Female" id="female">
<label for="female"> Female</label>
</div>
</div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
<div class="form-group">
<input type="checkbox" value="Sports" id="sports" checked>
<label for="sports">Sports</label>
</div>
<div class="form-group">
<input type="checkbox" value="Movies" id="movies">
<label for="movies"> Movies</label>
</div>
<div class="form-group">
<input type="checkbox" value="Music" id="music">
<label for="music"> Music</label>
</div>
</div>
</div>
</div>
</body>
</html>Style radios and checkboxes into buttons in CSS (styles.css)
While styling the radio buttons and checkboxes into buttons, we need to use some pseudo-classes from CSS like :checked. As mentioned above, the values in “for” and “id” attributes in label and input must be same since we will be hiding the input and styling the label to look like buttons. Even though the input is hidden, when we set the same values in “for” and “id” attributes as described above, click the label will function the same as clicking the radio buttons and checkboxes.
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.buttons-container {
height: 300px;
background:#009949;
color:#fff;
padding: 15px;
border-radius: 10px;
}
/* hide the input buttons */
.buttons-container input[type="radio"],
.buttons-container input[type="checkbox"] {
display:none;
}
.buttons-container label {
font-size: 1.2rem;
color: #ddd;
}
.buttons-container .form-inline {
height: auto;
display: flex;
margin: 20px 0;
}
/* style the label to look like buttons */
.buttons-container .form-inline label {
padding: 10px;
border: 1px solid #fff;
color: #fff;
width: 20%;
text-align: center;
margin-bottom: 10px;
cursor: pointer;
}
/* if the radio or checkbox is checked, style the label */
.buttons-container input[type="radio"]:checked + label,
.buttons-container input[type="checkbox"]:checked + label {
background: #fff;
border: 1px solid #fff;
color: #009949;
}