如何对齐复选框及其标签始终跨浏览器

HTML

前端LEY米亚

2020-03-13

这是困扰我的CSS小问题之一。Stack Overflow周围的人们如何垂直对齐checkboxes以及他们labels始终如一的跨浏览器？每当我在Safari中正确对齐它们（通常vertical-align: baseline在上使用input）时，它们在Firefox和IE中就完全关闭了。在Firefox中进行修复，不可避免地将Safari和IE弄乱了。每次编写表单时，我都会在此上浪费时间。

这是我使用的标准代码：

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

我通常使用Eric Meyer的重置，因此表单元素相对而言是覆盖不大的。期待您提供的任何提示或技巧！

第1480篇《如何对齐复选框及其标签始终跨浏览器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共24个回答

A村村 2020.03.13

Simple solution:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

在Chrome，Firefox，IE9 +，Safari，iOS 9+中进行了测试

猿前端猿 2020.03.13

Yay thanks! This too has been driving me nuts forever.

In my particular case, this worked for me:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

I am using the reset.css which might explain some of the differences, but this seems to work well for me.

米亚Sam 2020.03.13

Use simply vertical-align: sub, as pokrishka already suggested.

Fiddle

HTML Code:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS Code:

.checkboxes input {
    vertical-align: sub;
}

Gil前端 2020.03.13

CSS：

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML：

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

上面的代码会将您的列表项放置在threecols中，只是更改宽度以适合您。

逆天路易 2020.03.13

以下内容提供了跨浏览器（甚至是IE9）的完美像素一致性：

这种方法非常明智，以至于显而易见：

创建一个输入和一个标签。
将它们显示为块，因此您可以根据需要浮动它们。
将高度和线条高度设置为相同的值，以确保它们居中并垂直对齐。
For em measurements, to calculate the height of the elements, the browser must know the height of the font for those elements, and it must not itself be set in em measurements.

This results in a globally applicable general rule:

input, label {display:block;float:left;height:1em;line-height:1em;}

With font size adaptable per form, fieldset or element.

#myform input, #myform label {font-size:20px;}

Tested in latest Chrome, Safari, and Firefox on Mac, Windows, Iphone, and Android. And IE9.

This method is likely applicable to all input types that are not higher than one line of text. Apply a type rule to suit.

GO逆天L 2020.03.13

我通常会保留一个未标记的复选框，然后使其“标签”成为一个单独的元素。这很痛苦，但是复选框和标签的显示方式之间存在很大的跨浏览器差异（如您所注意到的），这是我接近控制一切外观的唯一方法。

由于同样的原因，我最终还是在winforms开发中这样做。我认为checkbox控件的根本问题在于它实际上是两个不同的控件：box和label。通过使用复选框，您可以将其留给控件的实现者来决定如何将两个元素彼此相邻显示（并且它们总是会出错，哪里出错=不是您想要的）。

我真的希望有人对您的问题有更好的答案。

Pro梅 2020.03.13

对复选框的高度和宽度进行硬编码，删除其填充，并使其高度加上垂直边距等于标签的行高。如果标签文本为内联，则浮动该复选框。Firefox，Chrome和IE7 +均以相同的方式呈现以下示例：http : //www.kornea.com/css-checkbox-align

Tom十三 2020.03.13

input[type=checkbox]
{
    vertical-align: middle;
}

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

西门ItachiL 2020.03.13

如果您使用的是Twitter Bootstrap，则可以在上使用checkbox该类<label>：

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

逆天米亚 2020.03.13

我从来没有遇到过这样的问题：

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

JinJin老丝 2020.03.13

如果使用ASP.NET Web窗体，则无需担心DIV和其他元素或固定大小。我们可以<asp:CheckBoxList>通过float:left在CSS中设置CheckboxList输入类型来对齐文本。

请检查以下示例代码：

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX代码：

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

樱阳光Pro 2020.03.13

将输入类型复选框包裹在标签内，然后像这样浮动到左侧：

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

这为我工作：

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

确保的高度与（blocklevel）的line-height相同。

猿路易 2020.03.13

选择的具有400多个投票的答案在Chrome 28 OSX中对我不起作用，可能是因为它没有在OSX中进行过测试，或者它在2008年回答该问题时都可以使用。

时代已经改变，新的CSS3解决方案现在是可行的。我的解决方案使用伪元素创建自定义复选框。因此，规定（利弊，无论您如何看）如下：

仅适用于现代浏览器（FF3.6 +，IE9 +，Chrome，Safari）
依赖于自定义设计的复选框，该复选框将在每个浏览器/ OS中呈现完全相同的外观。在这里，我只是选择了一些简单的颜色，但是您总是可以添加线性渐变，这样可以使它看起来更棒。
适应特定的字体/字体大小，如果更改了该大小，则只需更改复选框的位置和大小以使其垂直对齐即可。如果正确调整，在所有浏览器/操作系统中，最终结果仍应接近完全相同。
没有垂直对齐特性，没有浮点
在我的示例中必须使用提供的标记，如果结构像问题一样，它将不起作用，但是，布局本质上看起来是相同的。如果要四处移动，还必须移动关联的CSS

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

此解决方案隐藏了checkbox，并向标签添加伪元素并设置其样式，以创建可见的checkbox。由于标签与隐藏的复选框相关联，因此输入字段仍将得到更新，并且值将与表单一起提交。

如果您有兴趣，这是我对单选按钮的看法：http : //jsfiddle.net/DtKrV/2/

希望有人觉得这有用！

十三LEY 2020.03.13

这对我来说很好：

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

村村达蒙 2020.03.13

我不喜欢相对定位，因为它使元素在其级别上高于其他所有元素（如果布局复杂，它可以放在某些东西之上）。

我发现这vertical-align: sub使得复选框在Chrome，Firefox和Opera中的排列看起来足够好。由于我没有MacOS，并且IE10略有关闭，因此无法检查Safari，但我发现它对我来说已经足够了。

另一个解决方案可能是尝试为每个浏览器制作特定的CSS，并使用％/ pixels / EMs中的垂直对齐对其进行微调：http : //css-tricks.com/snippets/css/browser-specific-hacks/

凯小卤蛋 2020.03.13

我认为这是最简单的方法

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

Jim小胖米亚 2020.03.13

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

诀窍是仅在表单元格中使用垂直对齐方式，如果使用标签标签，则仅在行内块中使用。

路易Pro 2020.03.13

现在所有现代浏览器都支持flexbox，对我来说，类似的东西似乎更简单。

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

这是完整的带前缀版本的演示：

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Itachi达蒙Green 2020.03.13

我通常使用行高来调整静态文本的垂直位置：

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

希望能有所帮助。

神无阿飞古一 2020.03.13

对我来说，唯一完美的解决方案是：

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

今天在Chrome，Firefox，Opera，IE 7和8中进行了测试。示例：小提琴

乐猪猪 2020.03.13

尝试我的解决方案，我在IE 6，FF2和Chrome中进行了尝试，并且在所有三种浏览器中都逐像素渲染。

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

逆天樱 2020.03.13

看起来很有效的一件简单事情是应用vertical-align调整复选框的垂直位置。跨浏览器，它仍然会有所不同，但是解决方案并不复杂。

input {
    vertical-align: -2px;
}

参考

村村阿飞 2020.03.13

使用One Crayon的解决方案，我有一些对我有用的东西，并且更简单：

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
}

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

在Safari（我相信其基准）中以像素为单位呈现相同的内容，而Firefox和IE7的签出效果都很好。它也适用于各种大小的标签字体。现在，为了在选择和输入上固定IE的基准...

更新：（第三方编辑）

正确的bottom位置取决于字体系列和字体大小！我发现bottom: .08em;用于复选框和单选元素是一个很好的一般价值。我在使用Arial和Calibri字体的Windows中的Chrome / Firefox / IE11中使用几种小/中/大字体大小对其进行了测试。

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

达蒙小小 2020.03.13

尝试 vertical-align: middle

您的代码似乎也应该是：

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android