How to align checkboxes and their labels consistently cross-browsers

html css cross-browser alignment html-form

912522 观看

30回复

12197 作者的声誉

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here's the standard code that I work with:

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

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

作者: One Crayon 的来源 发布者: 2008 年 11 月 20 日

回应 (30)


86

2601 作者的声誉

尝试 vertical-align: middle

您的代码似乎应该是:

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

作者: digitalsanctum 发布者: 20.11.2008 06:07

2

61723 作者的声誉

I usually leave a checkbox unlabeled and then make its "label" a separate element. It's a pain, but there's so much cross-browser difference between how checkboxes and their labels are displayed (as you've noticed) that this is the only way I can come close to controlling how everything looks.

I also end up doing this in winforms development, for the same reason. I think the fundamental problem with the checkbox control is that it is really two different controls: the box and the label. By using a checkbox, you're leaving it up to the implementers of the control to decide how those two elements are displayed next to each other (and they always get it wrong, where wrong = not what you want).

I really hope someone has a better answer to your question.

作者: MusiGenesis 发布者: 20.11.2008 06:24

965

12197 作者的声誉

决定

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

  1. Inputs must be on their own line.
  2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
  3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I'll just give you the code:

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>

Here is the working example in JSFiddle.

This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

Things to note:

  • The *overflow declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.
  • As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
  • The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.
  • Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.

作者: One Crayon 发布者: 20.11.2008 07:47

7

86610 作者的声誉

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

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
作者: John Topley 发布者: 20.11.2008 07:52

19

3255 作者的声誉

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

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>

希望有所帮助。

作者: Bryan A 发布者: 20.11.2008 09:21

36

4967 作者的声誉

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

作者: Waleed Eissa 发布者: 28.12.2008 05:23

188

807 作者的声誉

Sometimes vertical-align needs two inline (span, label, input, etc...) elements next to each other to work properly. The following checkboxes are properly vertically centered in IE, Safari, FF, and Chrome, even if the text size is very small or large.

They all float next to each other on the same line, but the nowrap means that the whole label text always stays next to the checkbox.

The downside is the extra meaningless SPAN tags.

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

Now, if you had a very long label text that needed to wrap without wrapping under the checkbox, you'd use padding and negative text indent on the label elements:

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

作者: Nathan Bowers 发布者: 30.01.2009 09:12

9

5316 作者的声誉

这适合我:

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>

作者: dylanfm 发布者: 30.01.2009 09:26

1

0 作者的声誉

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

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

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

作者: Jeff 发布者: 19.03.2009 05:12

174

0 作者的声誉

Working off of One Crayon's solution, I have something that works for me and is simpler:

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

Renders pixel-for-pixel the same in Safari (whose baseline I trust) and both Firefox and IE7 check out as good. It also works for various label font sizes, big and small. Now, for fixing IE's baseline on selects and inputs...


Update: (Third-Party Edit)

The proper bottom position depends on font-family and font-size! I found using bottom: .08em; for checkbox & radio elements is a good general value. I tested it in Chrome/Firefox/IE11 in windows with Arial & Calibri fonts using several small/mid/large font-sizes.

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

作者: 发布者: 05.04.2009 07:41

6

0 作者的声誉

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

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

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

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

只需2美分。

作者: Stijn 发布者: 19.06.2009 11:46

3

2558 作者的声誉

With an input type checkbox wrapped inside the label and floated to the left like so:

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

this worked for me:

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

Make sure the height of the is identical to the line-height of the (blocklevel) .

作者: Matijs 发布者: 14.01.2010 10:31

130

19937 作者的声誉

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

input {
    vertical-align: -2px;
}

参考

作者: Frank Schwieterman 发布者: 10.05.2010 10:06

1

20619 作者的声誉

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

作者: Bob Fanger 发布者: 18.10.2010 01:28

1

7432 作者的声誉

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

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

作者: albert 发布者: 30.12.2010 08:49

6

599 作者的声誉

如果使用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>
作者: Rama Subba Reddy M 发布者: 03.08.2011 05:33

4

1957 作者的声誉

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

The trick is to use vertical-align only in table cells or inline-block if using label tag.

作者: Carlo Pires 发布者: 01.09.2011 10:31

2

359 作者的声誉

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>

The above code will place your list items in threecols and just change widths to suit.

作者: Philip Bevan 发布者: 02.03.2012 09:10

4

17019 作者的声誉

If you're using Twitter Bootstrap, you can just use the checkbox class on the <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
作者: Sunil D. 发布者: 06.04.2013 06:31

12

4311 作者的声誉

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

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

复选框的屏幕截图:Chrome 复选框的屏幕截图:IE

作者: Patrick 发布者: 17.04.2013 02:46

6

1193 作者的声誉

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

The times have changed, and new CSS3 solutions are now feasible. My solution uses pseudoelements to create a custom checkbox. So the stipulations (pros or cons, however you look at it) are as follows:

  • Only works in modern browsers (FF3.6+, IE9+, Chrome, Safari)
  • Relies on a custom designed checkbox, that will be rendered exactly the same in every browser/OS. Here I've just chosen some simple colors, but you could always add linear gradients and such to give it more of a bang.
  • Is geared to a certain font/font size, which if changed, you'd simply change the positioning and size of the checkbox to make it appear vertically aligned. If tweaked correctly, the end result should still be near to exactly the same in all browser / operating systems.
  • No vertical-alignment properties, no floats
  • Must use the provided markup in my example, it will not work if structured like the question, however, the layout will essentially look the same. If you want to move things around, you'll have to also move the associated CSS

Your HTML:

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

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

This solution hides the checkbox, and adds and styles pseudoelements to the label to create the visible checkbox. Because the label is tied to the hidden checkbox, the input field will still get updated and the value will be submitted with the form.

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

And if you're interested, here's my take on radio buttons: http://jsfiddle.net/DtKrV/2/

Hope someone finds this useful!

作者: MusikAnimal 发布者: 19.08.2013 09:38

10

1075 作者的声誉

我认为这是最简单的方法

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

小提琴

作者: gidzior 发布者: 21.11.2013 09:31

2

603 作者的声誉

So I know this has been answered many times, but I feel I have a way more elegant solution than those that have been provided already. And not only 1 elegant solution, but 2 separate solutions to tickle your fancy. With that said, everything you need to know and see are contained in 2 JS Fiddle's, with comments.


Solution #1 relies on the native "Checkbox" of the given browser, though with a twist... Its contained in a div which is easier to position cross-browser, with an overflow: hidden to chop the excess of a 1px stretched checkbox (this is so you cant see the ugly borders of FF)

Simple HTML: (follow the link to review the css with comments, code block is to satisfy stackoverflow) http://jsfiddle.net/KQghJ/

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

Solution #2 uses the "Checkbox Toggle Hack" to toggle the CSS state of a DIV, which has been properly positioned across browser, and setup with a simple sprite for the checkbox unchecked and checked states. All that is needed is to adjust the background-position with said Checkbox Toggle Hack. This, in my opinion, is the more elegant solution as you have more control over your checkboxes & radios, and can guarantee they look the same across browser.

Simple HTML: (follow the link to review the CSS with comments, code block is to satisfy StackOverflow) http://jsfiddle.net/Sx5M2/

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

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

作者: NinjaKC 发布者: 05.06.2014 12:10

4

2060 作者的声誉

Hardcode the checkbox's height and width, remove its padding, and make its height plus vertical margins equal to the label's line-height. If the label text is inline, float the checkbox. Firefox, Chrome, and IE7+ all render the following example identically: http://www.kornea.com/css-checkbox-align

作者: Vladimir Kornea 发布者: 07.08.2014 12:18

8

1224 作者的声誉

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

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

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

作者: pokrishka 发布者: 06.11.2014 01:59

24

716 作者的声誉

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

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

今天在Chrome,Firefox,Opera,IE 7和8中进行了测试。例如:小提琴

作者: Buzogany Laszlo 发布者: 24.02.2015 07:07

2

8597 作者的声誉

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;
}
作者: Marco Sulla 发布者: 30.07.2015 10:04

8

2654 作者的声誉

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

作者: Bryan Willis 发布者: 24.07.2016 11:53

3

29 作者的声誉

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

作者: Prime 发布者: 13.06.2017 09:43

2

3296 作者的声誉

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

使用图像呈现复选框(可以通过CSS设置自定义复选框)。这是FireFox中的一个(未选中)复选框,使用DOM检查器突出显示:

它只是一个正方形

这是Chrome中同样没有样式的复选框:

这是一个没有中心的广场,右边和底部都有“边距”

你可以看到边距(橙色); 填充不存在(将显示为绿色)。那么复选框右侧和底部的伪边距是什么?这些是用于复选框的图像的一部分。这就是为什么使用只是vertical-align: middle不够,这是跨浏览器问题的根源。

那么我们能做些什么呢?

一个明显的选择是 - 替换图像!幸运的是,人们可以通过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(基于Chromium),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(??)处非常不同:

缩放= 10它是7% 而对于zoom = 11,它几乎是该值的两倍

scale 似乎更一致:

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

所以大约14%和2px是正确的值。

现在我们知道(?)伪边距的大小,让我们注意这还不够。所有浏览器的复选框图标大小是否相同?唉! 以下是DOM检查器为无样式复选框显示的内容:

  • FireFox:13.3px
  • 基于铬:整个事物为12.8 像素,因此视觉上被认为是复选框的12.8(100% - 14%)= 11 像素
  • IE 11,Edge:13px
  • Safari:不适用(我相信这些应该在同一个屏幕上进行比较)

在我们讨论任何解决方案或技巧之前,让我们问:什么是正确的对齐?我们想要实现什么目标?在某种程度上,这是一个品味问题,但基本上我可以想到以下“好”对齐的方面:

同一基线上的文本和复选框(我故意不在此处调整复选框大小):

在此输入图像描述

或者以小写字母表示相同的中间行:

在此输入图像描述

或者以大写字母表示相同的中间行(更容易看出不同字体大小的差异):

在此输入图像描述

我们还必须决定复选框的大小是否应该等于小写字母,大写字母或其他内容的高度(更大,更小或小写和大写之间)。

For this discussion let's call an alignment nice if the checkbox is on the same baseline as the text and has the size of a capital letter (a highly arguable choice):

在此输入图像描述

Now what tools do we have to:

  1. adjust checkbox size
  2. recognize Chromium with its pseudo-margined checkbox and set specific styles
  3. adjust checkbox/label vertical alignment

?

  1. Regarding the checkbox size adjustment: there are width, height, size, zoom, scale (have I missed something?). zoom and scale don't allow to set absolute size, so they may help only with adjusting to text size, not set cross-browser size (unless we can write browser-specific rules). size doesn't work with Chrome (did it work with old IE? anyway, it's not that interesting). width and height work in Chrome and other browsers, so we can set a common size, but again, in Chrome it sets the size of the whole image, not the checkbox itself. Note: it is minimum(width, height) which defines a checkbox's size (if width ≠ height, the area outside checkbox square is added to "pseudo-margin").

    不幸的是,就我所见,Chrome复选框中的伪边距对于任何宽度和高度都不会设置为零。

  2. 我担心这些天没有可靠的CSS专用方法

  3. 让我们考虑垂直对齐。vertical-align当设置为middle或者baseline由于Chrome的伪边距时,无法给出一致的结果,为所有浏览器获得相同“坐标系”的唯一真正选择是将标签和输入对齐到top

    比较vertical-align:顶部和底部

    (在图片上:垂直对齐:顶部,底部和底部没有框阴影)

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

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

上面的代码段适用于Chrome(基于Chromium的浏览器),但其他浏览器需要较小的复选框。似乎无法以Chromium的复选框图像怪癖的方式调整大小和垂直对齐。我的最终建议是:使用自定义复选框 - 而且你会避免沮丧:)

作者: YakovL 发布者: 12.06.2019 09:05
32x32