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

Question

这是困扰我的一些小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的重置,因此表单元素相对干净的覆盖.期待您提供的任何提示或技巧!

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>

这是JSFiddle中的工作示例.

此代码假设您正在使用像Eric Meyer这样的重置,它不会覆盖表单输入边距和填充(因此在输入CSS中放置边距和填充重置).显然,在实时环境中,你可能会嵌套/覆盖一些东西以支持其他输入元素,但我想保持简单.

注意事项:

• 该*overflow声明是一个内联IE黑客(明星属性黑客).IE 6和7都会注意到它,但Safari和Firefox会正确地忽略它.我认为它可能是有效的CSS,但你的条件评论仍然会更好; 只是为了简单而使用它.
• 最好的我可以说,vertical-align浏览器中唯一一致的声明是vertical-align: bottom.设置此值然后向上相对定位在Safari,Firefox和IE中几乎完全相同,只有一两个像素差异.
• 使用对齐的主要问题是IE在输入元素周围粘贴了一堆神秘的空间.它不是填充或边缘,它是持久的.在复选框上设置宽度和高度,然后overflow: hidden由于某种原因切断了额外的空间,并允许IE的定位与Safari和Firefox非常相似.
• 根据您的文本大小,您无疑需要调整相对位置,宽度,高度等,以使事物看起来正确.

希望这有助于其他人!我没有在我今天早上工作的任何项目上尝试过这种特定的技术,所以如果你发现一些工作更加一致,那么肯定会搞定.

Answer 2

有时vertical-align需要彼此相邻的两个内联(span,label,input等)元素才能正常工作.以下复选框在IE,Safari,FF和Chrome中正确垂直居中,即使文本大小非常小或很大.

它们都在同一行上彼此相邻浮动,但now​​rap意味着整个标签文本始终位于复选框旁边.

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

.checkboxes label {
  display: inline-block;
  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>

现在,如果你有一个非常长的标签文本需要包装而不包装在复选框下,你可以在标签元素上使用填充和负文本缩进:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.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 so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</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

使用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位置取决于font-family和font-size!我发现使用bottom: .08em;复选框和无线电元素是一个很好的一般价值.我使用Arial和Calibri字体在Chrome/Firefox/IE11中使用几种小/中/大字体大小在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>

Answer 4

一个似乎运作良好的简单方法是使用vertical-align应用复选框的垂直位置.它仍然会因浏览器而异,但解决方案并不复杂.

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 css案例来整理填充 - 但文本和框是内联的.

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

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

我认为这是最简单的方法

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

小提琴

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

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

我不喜欢相对定位,因为它使元素在其级别上呈现在其他所有内容之上(如果你有复杂的布局,它可以在某些东西之上).

我发现vertical-align: sub在Chrome,Firefox和Opera中,复选框看起来很好.无法检查Safari因为我没有MacOS而且IE10稍微关闭,但我发现它对我来说是足够好的解决方案.

另一种解决方案可能是尝试为每个浏览器制作特定的CSS,并使用%/ pixels/EMs中的一些vertical-align对其进行微调:http: //css-tricks.com/snippets/css/browser-specific-hacks/

Answer 15

选择400+ upvotes的答案对我来说在Chrome 28 OSX中不起作用,可能是因为它没有在OSX中测试过,或者在2008年回答这个问题的时候确实有效.

时代已经改变,现在新的CSS3解决方案是可行的.我的解决方案使用伪元素来创建自定义复选框.所以规定(无论你看看它的优缺点)如下:

• 仅适用于现代浏览器(FF3.6 +,IE9 +,Chrome,Safari)
• 依赖于自定义设计的复选框,在每个浏览器/操作系统中都会呈现完全相同的复选框.在这里,我刚刚选择了一些简单的颜色,但你总是可以添加线性渐变等,以便让它更具爆炸性.
• 是否适合某种字体/字体大小,如果更改,您只需更改复选框的位置和大小,使其显示为垂直对齐.如果调整正确,最终结果仍应接近所有浏览器/操作系统中的完全相同.
• 没有垂直对齐属性,没有浮动
• 必须在我的示例中使用提供的标记,如果结构类似于问题,它将无法工作,但是,布局基本上看起来相同.如果你想移动东西,你还必须移动相关的CSS

你的HTML:

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

你的CSS:

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

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

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

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

希望有人觉得这很有用!

Answer 16

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

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

Answer 17

如果使用ASP.NET Web窗体,则无需担心DIV和其他元素或固定大小.我们可以<asp:CheckBoxList>通过设置float:leftCSS中的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 18

将输入类型复选框包裹在标签内并向左浮动，如下所示：

<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) 的行高相同。

Answer 19

最后，让我们看一下问题的根源

复选框是使用图片呈现的（一个可以通过CSS设置自定义）。这是FireFox中的一个（未选中的）复选框，以DOM检查器突出显示：

这是Chrome中相同的无样式复选框：

您可以看到边距（橙色）；填充不存在（将显示为绿色）。那么，复选框右侧和底部的伪利润是多少？这些是用于复选框的图像的一部分。这就是为什么仅使用vertical-align: middleJust不够用，这就是跨浏览器问题的根源。

那么我们该怎么办？

一个明显的选择是–替换图像！幸运的是，可以通过CSS做到这一点，并用外部图像，base64（in-CSS）图像，in-CSS svg或只是伪元素来替换它们。这是一种健壮的（跨浏览器！）方法，下面是一个从该问题中窃取此类调整的示例：

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

你可能想了解这样的造型像一些列出了一些更有深度的文章在这里 ; 这超出了此答案的范围。

好吧，那还是没有自定义图像或伪元素的解决方案呢？

TL; DR：看来这行不通，请改用自定义复选框

首先，请注意，如果在其他浏览器中复选框图标内的那些伪边距是任意的，则没有一致的解决方案。要构建一个图像，我们必须在现有浏览器中探索此类图像的结构。

那么哪些浏览器的复选框中有伪边距？我已经检查了Chrome 75，Vivaldi 2.5（基于铬），FireFox 54（不要问为什么这样过时），IE 11，Edge 42，Safari ?? （借用一分钟，忘了签出版本）。只有Chrome和Vivaldi才具有这种伪利润（我怀疑所有基于Chromium的浏览器也一样，例如Opera）。

这些伪利润的大小是多少？要弄清楚这一点，可以使用缩放复选框：

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

我的结果是宽度/高度的7％，因此以绝对单位为0.9-1.0px。但是，准确性可能会受到质疑：请zoom为复选框尝试不同的值。在Chrome和Vivaldi的测试中，伪边距的相对大小在zoom值10、20和值11-19（??）上有很大不同：

scale 似乎更一致：

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

因此大约14％和2px是正确的值。

现在我们知道（？）伪边距的大小，让我们注意这还不够。所有浏览器的复选框图标的大小都一样吗？唉! 这是DOM检查器显示的无样式复选框的内容：

• 火狐：13.3px
• 基于铬的元素：整个元素为12.8px，因此对于19.99像素（可视为复选框）为12.8（100％-14％）= 11px
• IE 11，边缘：13 像素
• Safari：不适用（我认为这些应该在同一屏幕上进行比较）

现在，在讨论任何解决方案或技巧之前，让我们问：什么是正确的对齐方式？我们要达到什么目标？在某种程度上，这是一个品味问题，但基本上我可以想到以下“不错”的对齐方式：

文字和复选框位于同一基线上（我故意不在此处调整复选框大小）：

或在小写字母方面具有相同的中间行：

或用大写字母表示相同的中间行（更容易看出不同字体大小的差异）：

并且我们还必须确定复选框的大小是否应等于小写字母，大写字母或其他大小（更大，更小或介于小写和大写之间）的高度。

在此讨论中，如果复选框与文本位于相同的基线上并且具有大写字母的大小（这是一个非常有争议的选择），那么我们将对齐方式称为“不错”。

现在，我们必须使用哪些工具：

1. 调整复选框大小
2. 通过伪距复选框识别Chromium并设置特定样式
3. 调整复选框/标签垂直对齐

？

1. 关于复选框大小调节：有width，height，size，zoom，scale（有我错过了什么？）。zoom并且scale不允许设置绝对大小，因此它们可能仅有助于调整文本大小，而不能设置跨浏览器大小（除非我们可以编写特定于浏览器的规则）。size不适用于Chrome（它是否可以与旧版IE一起使用？无论如何，它并不那么有趣）。width并height可以在Chrome和其他浏览器中使用，因此我们可以设置一个通用尺寸，但是在Chrome中，它可以设置整个图像的尺寸，而不是复选框本身的尺寸。注意：它是最小值（宽度，高度），用于定义复选框的大小（如果宽度？高度，则复选框正方形外部的区域将添加到“伪边距”中）。

   不幸的是，就我所知，对于任何宽度和高度，Chrome复选框中的伪边距均未设置为零。

2. 恐怕这些天没有可靠的纯CSS方法。

3. 让我们考虑垂直对齐。vertical-align设置为middle或baseline由于Chrome的伪边距而无法提供一致的结果，对于所有浏览器，获得相同“坐标系”的唯一真实选择是对齐标签并输入到top：

   

   （在图片上：垂直对齐：顶部，底部和底部无框阴影）

那么我们从中得到什么结果呢？

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

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

上面的代码段适用于Chrome（基于Chromium的浏览器），但其他浏览器需要较小的复选框。似乎无法以Chromium复选框图像怪异的方式调整尺寸和垂直对齐方式。我的最终建议是：改用自定义复选框-这样可以避免感到沮丧：)