How to add a border to a checkbox using css?
May 25, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, learn how to add a border to a checkbox using css?.
Checkbox is an HTML element which is used to take input from the user.
Table of contents
- Includes css in html page
- Include the code in body
This article will guide you to adding a border to a checkbox in CSS with example.
Step 1: Includes css in html page
Here we are using css for basic styling in the checkbox and adding a border.
.border input[type=checkbox] {
outline: 2px solid #c00;
margin-left: 5%;
}
Step 2: Include the code in body
Include the code below in <body> to create an input checkbox.
<div class="border">
<input type='checkbox'><label>Press your mouse</label><br />
</div>Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.border input[type=checkbox] {
outline: 2px solid #c00;
margin-left: 5%;
}
</style>
</head>
<body>
<h3> Add a border to a checkbox</h3>
<div class="border">
<input type='checkbox'><label>Press your mouse</label><br/>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍