如何使复选框及其标签一致地跨浏览器

这是困扰着我的不小的CSS问题之一。 在StackOverflow周围的人如何垂直对齐复选框和他们的标签持续跨浏览器？ 每当我在Safari中正确对齐它们（通常在输入上使用vertical-align: baseline ），它们在Firefox和IE中完全关闭。 修复它在Firefox中，Safari和IE是不可避免的搞砸了。 每次我编写一个表格，我都会浪费时间。

以下是我使用的标准代码：

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

我通常使用Eric Meyer的重置，所以表单元素相对干净的覆盖。 期待您提供的任何提示或技巧！

Answer 1

经过一个多小时的调整，测试和尝试不同风格的标记，我想我可能有一个体面的解决方案。 这个特定项目的要求是：

1. 输入必须在自己的路线上。
2. 复选框输入需要与所有浏览器中的标签文本垂直对齐（如果不是相同的话）。
3. 如果标签文本包装，它需要缩进（所以没有包装在复选框下面）。

在进行任何解释之前，我只给你一些代码：

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

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

Answer 2

有时垂直对齐需要两个内联（span，label，input等）元素相互靠近才能正常工作。 以下复选框在IE，Safari，FF和Chrome中正确垂直居中，即使文本大小非常小或大。

它们都在同一行上相互浮动，但是nowrap意味着整个标签文本总是停留在复选框旁边。

缺点是额外的无意义的SPAN标签。

 .checkboxes label { display: block; float: left; padding-right: 10px; white-space: nowrap; } .checkboxes input { vertical-align: middle; } .checkboxes label span { vertical-align: middle; } 

 <form> <div class="checkboxes"> <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label> <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label> <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label> </div> </form> 

Answer 3

通过一个蜡笔小新的解决方案 ，我有一些适合我的方法，比较简单：

 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> 

Answer 4

似乎很好用的一个简单的事情是应用垂直对齐来调整复选框的垂直位置。 它在不同的浏览器上仍然会有所不同，但解决方案并不复杂。

 input { vertical-align: -2px; } 

参考

Answer 5

尝试vertical-align: middle

你的代码看起来应该是这样的：

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

Answer 6

尝试我的解决方案，我在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> 

Answer 7

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

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

在Chrome，Firefox，Opera，IE 7和8测试今天。例如： 小提琴

Answer 8

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

 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> 

Answer 9

我还没有完全测试我的解决方案，但它似乎很好。

我的HTML只是：

 <label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label> 

然后我把所有复选框的高度和宽度设置为24px 。 为了使文本对齐，我使标签的line-height也是24px并指定vertical-align: top; 像这样：

编辑： IE测试后，我添加了vertical-align: bottom; 到输入并更改了标签的CSS。 你可能会发现你需要一个条件IE浏览器的情况下整理填充 – 但文本和框内联。

 input[type="checkbox"] { width: 24px; height: 24px; vertical-align: bottom; } label.checkbox { vertical-align: top; line-height: 24px; margin: 2px 0; display: block; height: 24px; } 

如果有人发现这不起作用，请让我知道。 这是它的行动（在Chrome浏览器和IE浏览器 – 截图是采取了视网膜和使用相似的IE浏览器）：

Answer 10

我觉得这是最简单的方法

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

小提琴

Answer 11

我从来没有这样做的问题：

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

Answer 12

这适用于我：

 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> 

Answer 13

只是想添加关于标签上'for'属性的讨论（稍微偏离主题）：

请尽管提供，即使没有必要，因为使用javascript非常方便：

 var label = ... var input = document.getElementById(label.htmlFor); 

比试图弄清楚标签是否嵌套了输入，或者输入是在标签之前，还是之后，等等，这样做要方便得多。

只是我2美分。

Answer 14

如果您使用ASP.NET Web窗体 ，则无需担心DIV和其他元素或固定大小。 我们可以通过设置float:left将<asp:CheckBoxList>文本对齐到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> 

Answer 15

现在所有的现代浏览器都支持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> 

Answer 16

我不喜欢相对定位，因为它使元素呈现在其他所有层次上（如果你有复杂的布局，它可以得到最多的东西）。

我发现vertical-align: sub使复选框在Chrome，Firefox和Opera中看起来足够好。 因为我没有MacOS，IE10稍微关闭，所以无法检查Safari，但是我发现它对我来说足够好。

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

Answer 17

 <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> 

诀窍在于，如果使用标签标签，则仅在表格单元格或内联块中使用垂直对齐。

Answer 18

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

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

Answer 19

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

Answer 20

使用包装在标签内的输入类型复选框，像这样浮动到左边：

 <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; } 

确保高度与（块级）的高度相同。

Answer 21

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

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

我真的希望有人能更好地回答你的问题。

Answer 22

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中，只是改变宽度以适应。

Answer 23

耶感谢！ 这也一直让我疯狂。

在我的具体情况下，这对我有效：

 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; } 

我正在使用reset.css这可能解释一些差异，但这似乎对我很好。

Answer 24

 <fieldset class="checks"> <legend>checks for whatevers</legend> <input type="" id="x" /> <label for="x">Label</label> <input type="" id="y" /> <label for="y">Label</label> <input type="" id="z" /> <label for="z">Label</label> </fieldset> 

无论如何，你应该将自己的字段集中的表单控件包装在一起，在这里，它扮演的wrappa。 设置输入/标签做显示：块，输入浮动左，标签浮动右，设置你的宽度，左/右边距控制间距，相应地标签文本。

所以

 fieldset.checks { width:200px } .checks input, .checks label { display:block; } .checks input { float:right; width:10px; margin-right:5px } .checks label { float:left; width:180px; margin-left:5px; text-align:left; text-indent:5px } 

您可能需要设置边框，轮廓和线高以及跨浏览器/媒体解决方案。

Answer 25

position: relative; 在IE中使用z-index和jQuery的slideUp / slideDown等动画有一些问题。

CSS：

 input[type=checkbox], input[type=radio] { vertical-align: baseline; position: relative; top: 3px; margin: 0 3px 0 0; padding: 0px; } input.ie7[type=checkbox], input.ie7[type=radio] { vertical-align: middle; position: static; margin-bottom: -2px; height: 13px; width: 13px; } 

jQuery的：

 $(document).ready(function () { if ($.browser.msie && $.browser.version <= 7) { $('input[type=checkbox]').addClass('ie7'); $('input[type=radio]').addClass('ie7'); } }); 

样式可能需要调整，取决于<label>使用的字体大小

PS：
我使用ie7js来使CSS在IE6中工作。

Answer 26

在Chrome 28 OSX中，我选择了400多个upvotes的回答，但这个问题对我来说并不合适，可能是因为它没有在OSX上测试过，或者它在2008年的任何时候都工作过，当时这个问题得到了回答。

时代已经改变，现在新的CSS3解决方案已经可行了。 我的解决方案使用伪元素来创建一个自定义复选框 。 所以规定（正反两方面）如下：

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

你的HTML：

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

你的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; } 

此解决方案隐藏复选框 ，并添加样式伪元素以创建可见复选框。 由于标签绑定到隐藏的复选框，所以输入字段仍然会更新，并且值将与表单一起提交。

jsFiddle： http : //jsfiddle.net/SgXYY/6/

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

希望有人认为这有用！

Answer 27

所以我知道这已经被很多次的回答了，但是我觉得我已经有了一个更加优雅的解决方案，那些已经提供的解决方案。 不仅有1个优雅的解决方案，但2个独立的解决方案，以痒你的幻想。 有了这些说，你需要知道和看到的一切都包含在2 JS小提琴的评论。

---

解决方案＃1依赖于给定的浏览器的本机“复选框”，尽管扭曲..它包含在一个更容易定位跨浏览器，溢出：隐藏切割多余的1px steched复选框（这是如此，你不能看到FF的丑陋的边界）

简单的HTML 🙁 按照链接来评论与评论的CSS，代码块是满足stackoverflow） http://jsfiddle.net/KQghJ/

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

---

解决方案＃2使用“复选框切换黑客”来切换已正确定位在浏览器的DIV的CSS状态，并设置一个简单的精灵复选框未选中和检查状态。 所有需要的是用上面的Checkbox Toggle Hack来调整背景位置。 在我看来，这是更为优雅的解决方案，因为您可以更好地控制复选框和收音机，并且可以保证它们在浏览器中看起来相同。

简单的HTML 🙁 按照链接来评论与评论的CSS，代码块是满足stackoverflow） http://jsfiddle.net/Sx5M2/

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

---

如果有人不同意这些方法，请留下我的评论，我很想听到一些反馈，为什么其他人没有遇到这些解决方案，或者如果他们有，为什么我在这里看不到有关他们的答案？ 如果有人看到其中一种方法失败了，那么也很高兴看到这些方法，但是这些方法已经在最新的浏览器中进行了测试，并依赖于我所见过的相当古老和普遍的html / css方法。

Answer 28

以下给出了跨浏览器的像素完美一致性，甚至IE9：

这个方法非常明智，显而易见：

1. 创建一个输入和一个标签。
2. 显示它们为块，所以你可以浮动他们，只要你喜欢。
3. 将高度和线高设置为相同的值以确保它们居中对齐。
4. 对于em测量，为了计算元素的高度，浏览器必须知道这些元素的字体的高度，并且它本身不能被设置为em测量。

这导致全球适用的一般规则：

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

字体大小适合每个表单，字段集或元素。

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

在Mac，Windows，Iphone和Android上的最新Chrome，Safari和Firefox上进行测试。 和IE9。

此方法可能适用于不高于一行文本的所有输入类型。 应用类型规则以适应。

Answer 29

这不是解决问题的最好方法

 vertical-align: middle 

---

添加style="position:relative;top:2px;" 到输入框将它下移2px 。 所以根据你的字体大小，你可以一起移动。

Answer 30

也许有些人正在犯同样的错误？ 这是…我为输入框设置了一个宽度，因为它们大部分都是“文本”类型的，但是遗漏了复选框的宽度 – 所以我的复选框试图占用过多的宽度，所以很难将标签贴在旁边。

 .checkboxlabel { width: 100%; vertical-align: middle; } .checkbox { width: 20px !important; } 

 <label for='acheckbox' class='checkboxlabel'> <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label> 

在IE6（使用类选择器）以及Firefox，Safari和Chrome的后期版本中，提供可点击的标签和正确的对齐方式