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.
不同浏览器中复选框的显示方式是怎样的？
不同的浏览器对Web表单中的复选框有不同的兼容性。在Internet Explorer中，复选框的外观取决于版本。旧版本不支持最新的CSS特性，因此很难对齐复选框和它们的标签。Mozilla Firefox和Safari的版本也是如此。
因此，为了确保复选框和标签的一致显示和正确对齐，我们必须在CSS中使用跨浏览器兼容技术。
注意− 在创建网页表单时，使用for属性与任何类型的输入元素通常是一个好的做法。这样可以确保复选框和其标签对齐。始终确保<label>的for属性值与<input>的id属性值相同。
立即学习“前端免费学习笔记（深入）”；
我们有几种CSS技术和实践，以确保在不同平台上复选框和标签的正确对齐。下面讨论了其中一些。
使用vertical-align样式化复选框
使用display和vertical-align属性，我们可以将复选框和其标签对齐。
示例
在这里，“display: inline-block”属性使我们能够将复选框的显示类型设置为内联块。而“vertical-align: middle”属性将垂直地将复选框与其容器居中对齐。
同时使用这两个属性将确保复选框与其他元素在同一行显示，并在行的中间对齐。因此，复选框及其标签将在同一行上对齐，使标签的文本与复选框保持居中对齐。
<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>
使用CSS Flexbox
我们可以将<label>元素作为弹性容器来对齐复选框和标签。
示例
在这个例子中，我们通过使用 display: flex 将标签元素作为一个弹性容器。 align-items: center 属性将标签的文本与复选框居中对齐。
虽然我们在输入元素中使用了 flex: none 来确保复选框的宽度不会随标签（容器）大小的变化而改变。同时，使用这三个属性可以使复选框和标签在水平方向上居中对齐。
<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>
使用vertical-align属性
复选框默认情况下在一些现代浏览器中与标签文本的基线对齐。然而，为了确保它们的正确对齐，我们可以为标签和输入元素设置vertical-align属性为“top”。
示例
在下面的示例中，我们使用“display: inline-block”属性将标签（class= "container"）和输入元素显示为内联块元素。这使得这两个元素都是内联的，其尺寸可以调整“input[type="checkbox"]” is a selector which is used to select or match the checkbox type of input element.
此外，我们使用了“vertical-align: top”属性将元素垂直对齐到其容器的顶部。同时使用这些属性来对标签和输入元素进行设置，确保它们都垂直对齐在容器的顶部，并且相对于彼此以行内方式显示。
<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>
使用Position和Vertical-align属性
保持输入元素的position属性为relative，并使用vertical-align: bottom属性也可以对齐复选框和标签。
示例
在这里，我们将标签设为块级元素，以便它占据容器的整个宽度。移除输入元素的内边距和外边距。使用vertical-align: bottom属性可以使复选框在垂直方向上与容器底部对齐。使用position属性可以将复选框与标签对齐。
<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>
结论
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.
