it-swarm.asia

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

这是困扰我的一些小CSS问题。 Stack Overflow周围的人如何垂直对齐checkboxes和他们的labels一致 跨浏览器 ?每当我在Safari中正确对齐它们时(通常在input上使用vertical-align: baseline),它们在Firefox和IE中完全关闭。修复它在Firefox中,Safari和IE不可避免地搞砸了。每次编写表单时,我都会浪费时间。

这是我使用的标准代码:

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

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

1579
One Crayon

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

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

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

947
One Crayon

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

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

缺点是额外无意义的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>

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

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

183
Nathan Bowers

使用 一个蜡笔的解决方案 ,我有一些适合我的东西,并且更简单:

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

167

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

input {
    vertical-align: -2px;
}

参考

124
Frank Schwieterman

试试vertical-align: middle

你的代码似乎应该是:[。_____。]

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

85
digitalsanctum

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

36
Waleed Eissa

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

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

今天在Chrome,Firefox,Opera,IE 7和8中测试过。示例:Fiddle

24
Buzogany Laszlo

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

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>

希望有所帮助。

18
Bryan A

我还没有完全测试我的解决方案,但似乎工作得很好。

我的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的并行):

screenshot of checkboxes: Chromescreenshot of checkboxes: IE

12
Patrick

我认为这是最简单的方法

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

Fiddle

10
gidzior

这适合我:

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>

9
dylanfm

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

8
Bryan Willis

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

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

另一个解决方案可能是尝试为每个浏览器制作特定的CSS并使用%/ pixels/EMs中的一些vertical-align进行微调:[。_____。] http://css-tricks.com/snippets/css /浏览器特定的黑客/

8
pokrishka

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

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

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

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

  • 仅适用于现代浏览器(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/

希望有人觉得这很有用!

6
MusikAnimal

只是想在标签上添加关于'for'属性的讨论(略微偏离主题):

即使没有必要,请提供它,因为从javascript使用非常方便:

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

这比试图弄清楚标签的输入是否嵌套,或者输入是在标签之前,还是之后......等等都要方便得多。而且它永远不会伤害它。所以。

只需2美分。

6
Stijn

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

请检查以下示例代码:

.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>
6
Rama Subba Reddy M
<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>

诀窍是只在表格单元格中使用vertical-align,如果使用label标签则使用内联块。

4
Carlo Pires

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

4
Vladimir Kornea

如果你正在使用Twitter Bootstrap,你可以在<label>上使用checkbox类:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
4
Sunil D.

使用输入类型复选框包裹在标签内并向左浮动,如下所示:

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

3
Matijs

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

3
Prime

使用简单的vertical-align: sub,作为 pokrishka 已经建议。

Fiddle

HTML代码:

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

CSS代码:

.checkboxes input {
    vertical-align: sub;
}
2
Marco Sulla

我通常留下一个未标记的复选框,然后将其“标签”作为一个单独的元素。这很麻烦,但是复选框和它们的标签显示方式之间有很多跨浏览器的区别(正如你所注意到的),这是我能够接近控制一切外观的唯一方式。

出于同样的原因,我也最终在winforms开发中这样做了。我认为复选框控件的根本问题在于它实际上是两个不同的控件:盒子和标签。通过使用一个复选框,您可以将它留给控件的实现者来决定这两个元素是如何彼此相邻显示的(并且它们总是错误的,错误的=不是您想要的)。

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

2
MusiGenesis

所以我知道这已经被多次回答了,但是我觉得我有一种比已经提供的更优雅的解决方案。不仅有一个优雅的解决方案,还有两个独立的解决方案可以让您感到满意。话虽如此,您需要知道和看到的所有内容都包含在2个JS Fiddle中,并带有注释。


解决方案#1依赖于给定浏览器的原生“Checkbox”,但有一个扭曲...它包含在div中,更容易定位跨浏览器,带溢出:隐藏以切断多余的1px拉伸复选框(这是你不能看到FF的丑陋边界)

简单的HTML: (按照链接查看带有注释的css,代码块是为了满足stackoverflow) http://jsfiddle.net/KQghJ/

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

解决方案#2使用“Checkbox Toggle Hack”来切换已在浏览器中正确定位的DIV的CSS状态,并使用简单的Sprite进行设置,以选中未选中和已检查的复选框状态。所需要的只是使用Checkbox Toggle Hack调整背景位置。在我看来,这是更优雅的解决方案,因为您可以更好地控制您的复选框和无线电,并且可以保证它们在浏览器中看起来相同。

简单的HTML: (按照链接查看带注释的CSS,代码块是为了满足StackOverflow) http://jsfiddle.net/Sx5M2/

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

如果有人不同意这些方法,请给我一个评论,我很想听到一些关于为什么其他人没有遇到这些解决方案的反馈,或者如果他们有,为什么我在这里看不到有关他们的答案?如果有人看到这些方法中的一个失败,那么也很高兴,但是这些已经在最新的浏览器中进行了测试,并依赖于相当古老的HTML/CSS方法,并且我已经看到了它的普遍性。

2
NinjaKC

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>

上面的代码会将您的列表项放在三个库中,只需更改宽度即可。

2
Philip Bevan

以下提供了跨浏览器的像素完美一致性,甚至是IE9:

这种方法非常明智,显而易见:

  1. 创建输入和标签。
  2. 将它们显示为块,以便您可以随意浮动它们。
  3. 将高度和线高设置为相同的值,以确保它们居中并垂直对齐。
  4. 对于 em measurements,要计算元素的高度,浏览器必须知道这些元素的字体高度,并且它本身不能在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。

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

1
Henrik Erlandsson

谢谢!这也一直让我疯狂。 

在我的特殊情况下,这对我有用:

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,这可能解释了一些差异,但这似乎对我有用。

1
Jeff

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中工作。 

1
Bob Fanger
<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>

无论如何,你应该将表单控件组合在一起放在他们自己的fieldsets中,在这里,它会播放wrappa。 set input/label do display:block,input float left,label float right,设置宽度,用左/右边距控制间距,相应地对齐标签文本。 

所以

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
}

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

1
albert

也许有些人犯了同样的错误?这是...我为输入框设置了一个宽度,因为它们大多是“文本”类型,但后来却忘了为复选框覆盖那个宽度 - 所以我的复选框试图占用大量的宽度和因此很难在它旁边对齐标签。

.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的后期版本中进行正确的对齐

0
Geoff Kendall

这不是解决问题的最佳方式

vertical-align: middle

style="position:relative;top:2px;"添加到输入框会将其向下移动2px。因此,根据您的字体大小,您可以移动它。

0
rene

简单的解决方案:

<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+中测试

0
Dylan Sharhon

我发现我可以排列它们的唯一方法是使用绝对位置作为输入。玩输入的顶部变量得到了我想要的结果。

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}
0
vladiim