Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align checkbox and its label on cross-browsers using CSS?
Web forms are popularly used in modern websites. For webforms, we have a common element known as checkboxes. However, aligning these checkboxes and their labels in different browsers is a challenging task. This is because it may be displayed differently in different browsers and devices. When it comes to display of checkboxes, different browsers may have slightly different styles and rendering methods. To solve this problem, we will be discussing different ways to align the checkboxes along with their labels using CSS on cross-browsers.
How are Checkboxes Displayed in Different Browsers?
Different browsers have different compatibility for checkboxes in web forms. In Internet Explorer, the appearance of checkboxes depends upon the version. The older versions do not support the latest CSS features, so it is difficult to align the checkboxes and their labels. Same works for the versions of Mozilla Firefox and Safari.
Hence, in order to ensure consistently display and properly align the checkboxes and labels, we must use cross-browser compatibility techniques in CSS.
Note − Using for attribute with any of the type of input element is often a good practice while creating web forms. This ensures that the checkbox and its label is aligned together. Always make sure that the value of for attribute of <label> is same as the value of id attribute of <input>.
We have several CSS techniques and practices to ensure proper alignment of checkboxes and labels across different platforms. Some of them are discussed below.
Styling the Checkbox Using Vertical-align
Using display and vertical align property together, we can align the checkbox and its label.
Example
Here, the “display: inline-block” property enables us to set the display type of the checkbox as an inline block. While the “vertical-align: middle” property will align the checkbox at the center of its container vertically.
Using both the properties will ensure that the checkbox is displayed in line with other elements and aligned at the middle of the line. Hence, the checkbox and its label will be aligned on the same line, keeping the text of the label centrally aligned with the checkbox.
<html>
<head>
<style>
input[type="checkbox"] {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<h2> Checkbox </h2>
<div class="container">
<label for="demo">
<input type="checkbox" id="demo"> Option 1 </label>
<br>
<label for="demo">
<input type="checkbox" id="demo"> Option 2 </label>
</div>
</body>
</html>
Using the CSS Flexbox
We can make <label> element as the flex container to align the checkbox and label.
Example
In this example, we have made the label element as a flex container by using display: flex. The align-items: center property centrally aligns the text of the label with the checkbox.
While we have used flex: none for our input element to ensure that the width of the checkbox does not change with the change in size of the label (container). Using these three properties together, makes the checkbox and label to centrally align with respect to each other.
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
padding: 2px;
}
input[type=checkbox] {
flex: none;
}
</style>
</head>
<body>
<h2> Fruits </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Mango </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Banana </label>
</div>
</body>
</html>
Using Vertical-align Property
The checkbox is by default aligned to the baseline of the text of the label in some modern browsers. However, to ensure their proper alignment we can set the vertical-align property to “top” for both the label and input element.
Example
In the following example, we have displayed the label (class= "container") and the input element as inline block elements by using the “display: inline-block” property. This makes both the elements inline whose dimensions can be adjusted.
“input[type="checkbox"]” is a selector which is used to select or match the checkbox type of input element.
Also, we have used the “vertical-align: top” property to vertically align the elements to the top of their container. Using these properties together for both label and input elements ensures that both of them are vertically aligned at the top of container and are displayed in line with respect to each other.
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
margin-right: 15px;
letter-spacing: 1px;
}
input[type="checkbox"] {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
Using Position and Vertical-align Property
Keeping the position of the input element as relative and using vertical-align: bottom property can also align the checkboxes and labels.
Example
Here, we make the label as block element so that it takes up the full width of the container. Remove the padding and margin for the input element. vertical-align: bottom property aligns the checkbox to the bottom of the container vertically. The position property is used to align the checkbox with the label.
<html>
<head>
<style>
CSS code * {
padding: 0;
margin: 0;
}
.container {
display: block;
padding-left: 20px;
}
input {
width: 17px;
height: 17px;
vertical-align: bottom;
position: relative;
top: -1px;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<br>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
Conclusion
Web forms are fundamental component of web development which are popularly used. To make it cross-browser compatible, we should make sure that alignment of input and label element should be proper. This makes your website look consistent and professional across all browsers and devices.
7K+ Views
To Continue Learning Please Login