Как совместить флажки и их метки последовательно в кросс-браузерах

Это одна из мелких проблем 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>

Я обычно использую сброс Эрика Мейера, поэтому элементы формы относительно чисты от переопределений. Ждем любых советов или хитростей, которые вы можете предложить!

20.11.2008 18:02:01
Поместите каждый флажок и метку в элемент <li>. Добавьте переполнение: скрытое в <li> и поместите метку и флажок слева. Тогда все они идеально выровняются. Не устанавливайте флажок внутри элемента label, очевидно.
volume one 18.01.2014 18:37:15
Я получил это с помощью heightи line-heightатрибутов, посмотрите jsfiddle.net/wepw5o57/3
TheGr8_Nik 9.12.2014 13:41:57
Манипуляции с positionи topрешат эту проблему Пример: jsfiddle.net/ynkjc22s
Profesor08 9.04.2016 12:59:44
2019. все та же проблема. все еще нужны некоторые хаки, чтобы заставить это работать :(
dieter 6.04.2019 08:40:48
@dieter посмотри мой ответ, я объяснил, зачем нужны хаки и какой подход не хакерский: stackoverflow.com/a/56558431/3995261
YakovL 12.06.2019 10:31:36
30 ОТВЕТОВ

пытаться vertical-align: middle

также ваш код выглядит так:

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

92
12.11.2017 18:09:41
<label for="blah">необходимо только в том случае, если вы используете что-то, для чего нет смысла переносить метку (например, текстовое поле; я обычно буду использовать <label for="blah">Foo</label><input id="blah" type="text" />в этом случае). С флажками я считаю, что это меньше разметки, чтобы обернуть его.
One Crayon 20.11.2008 18:13:08
Не совсем верно: Label-for позволит пользователям щелкнуть метку, чтобы установить флажок, в дополнение к простому щелчку на самом флажке. Это очень удобно для связывания двух элементов вместе.
EndangeredMassa 20.11.2008 18:30:09
Если вход вложен в метку, то щелкнув метку с активировать / выделить фокус для ввода; Атрибут for предназначен исключительно для случая, когда входные данные не являются вложенными.
One Crayon 20.11.2008 18:34:32
Это верно, One Crayon, но все равно рекомендуется использовать атрибут «for», иначе у вас будут проблемы с некоторыми браузерами, которые не распознают этот синтаксис, кашляющий IE.
Armstrongest 26.11.2008 21:33:08
если вы не хотите, чтобы у вашего флажка был идентификатор, вам нужно обернуть флажок внутри ярлыка
Simon_Weaver 30.01.2009 12:02:43

Я обычно оставляю флажок без метки, а затем делаю его «метку» отдельным элементом. Это больно, но между браузерами так много различий в том, как отображаются флажки и их метки (как вы заметили), что это единственный способ приблизиться к контролю того, как все выглядит.

Я также заканчиваю тем, что делал это в разработке winforms по той же причине. Я думаю, что основная проблема с элементом управления checkbox заключается в том, что это действительно два разных элемента управления: поле и метка. Используя флажок, вы оставляете на усмотрение разработчиков элемента управления решать, как эти два элемента отображаются рядом друг с другом (и они всегда ошибаются, где неправильно = не то, что вы хотите).

Я действительно надеюсь, что у кого-то есть лучший ответ на ваш вопрос.

2
20.11.2008 18:24:46
РЕШЕНИЕ

После более чем часа настройки, тестирования и разметки разных стилей, я думаю, у меня может быть достойное решение. Требования для этого конкретного проекта были:

  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 .

В этом коде предполагается, что вы используете сброс, такой как Эрик Майер, который не переопределяет поля ввода формы и отступы (следовательно, вводит сброс полей и отступов в CSS ввода). Очевидно, что в реальной среде вы, вероятно, будете вкладывать / переопределять материал для поддержки других элементов ввода, но я хотел, чтобы все было просто.

Что следует отметить:

  • *overflowДекларация является встроенный IE хак (звезда-недвижимость хак). И IE 6 и 7 заметят это, но Safari и Firefox будут правильно игнорировать это. Я думаю, что это может быть действительный CSS, но вам все же лучше с условными комментариями; просто использовал это для простоты.
  • Насколько я могу судить, единственное vertical-alignутверждение, которое было одинаковым для всех браузеров, было vertical-align: bottom. Установка этого и затем относительно позиционирования вверх в Safari, Firefox и IE вела себя почти одинаково с разницей в один или два пикселя.
  • Основная проблема в работе с выравниванием заключается в том, что IE накапливает загадочное пространство вокруг элементов ввода. Это не отступы или отступы, и это чертовски настойчиво. Установка ширины и высоты для флажка, а затем overflow: hiddenпо какой-то причине отсекает дополнительное пространство и позволяет позиционированию IE действовать очень похоже на Safari и Firefox.
  • В зависимости от размера текста, вам, без сомнения, потребуется настроить относительное положение, ширину, высоту и т. Д., Чтобы все выглядело правильно.

Надеюсь, это поможет кому-то еще! Я не пробовал эту конкретную технику на каких-либо проектах, кроме тех, над которыми я работал этим утром, поэтому определенно готовьтесь, если найдете что-то, что работает более последовательно.

1004
5.08.2016 22:54:58
нота. Вы, вероятно, должны поместить атрибут «for» на свой ярлык, чтобы он работал для всех браузеров и читателей текста. (Я понимаю, что вы, вероятно, оставили это для простоты)
Armstrongest 26.11.2008 21:34:52
Боже мой, я не понял, сколько людей не знали об этом: если вы заключаете ввод в тег label, атрибут «for» не нужен. Не стесняйтесь увидеть сами: w3.org/TR/html401/interact/forms.html#h-17.9.1
One Crayon 28.11.2008 17:33:00
Я не согласен с предложением об использовании условных комментариев. Держите взломанный * foobar CSS. Это хорошо работает, используется фреймворками, такими как YUI, и позволяет хранить вместе то, что принадлежит друг другу.
ebruchez 30.01.2009 17:54:24
Попробовал это в Chrome 28, Mac OSX, и флажок заметно ниже, чем текст
MusikAnimal 19.08.2013 17:42:40
Обратите внимание, что это не работает в последних версиях Chrome (я использую v36). i.imgur.com/y9Ffxsh.png Редактировать: ни Firefox (v31)
Hans 1.08.2014 23:20:37

У меня никогда не было проблем с этим:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
6
20.11.2008 19:52:48
Как я уже говорил предыдущим авторам, которые рекомендовали это: мне это не нравится, потому что это требует ненужной разметки. Кроме того, я попробовал эту разметку, но было трудно предотвратить наложение метки под входом (при этом каждая группа меток / ввода имела свои собственные строки).
One Crayon 20.11.2008 19:56:41
Таким образом, вместо «ненужной» разметки (используемой, вероятно, почти всеми), вы бы предпочли ненужный CSS?
Robert C. Barth 30.01.2009 06:49:25
Проблема с обертыванием стендов. Но в целом, да, я бы предпочел использовать посторонний CSS, а не разметку, поскольку CSS кэшируется, но разметку, возможно, придется загружать заново для каждой новой страницы.
One Crayon 31.01.2009 03:49:09
Сравните: 1 экземпляр дополнительного CSS -vs- много экземпляров дополнительной разметки.
Greg 17.08.2011 21:27:30

Я обычно использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:

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>

Надеюсь, это поможет.

20
6.08.2016 02:38:06
высота строки, дух. Всегда забудь об этом. Хорошая работа, отлично работает.
Craig 18.07.2019 00:23:31

Попробуйте мое решение, я попробовал его в 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>

39
6.08.2016 02:33:52
Интересно; Мне нравится идея плавать оба элемента; это элегантно исправляет проблему с упаковкой. Я имею в приложенный к оборачивать вход с этикеткой, но этот код чертовски уборщиком много , чем решение , которое я прибыл в.
One Crayon 31.01.2009 03:54:28
в этом примере флажок ввода и метка также должны иметь свойство display: block, и в этом случае они будут обрабатываться как обычные DIV, которые можно легко
se_pavel 17.04.2009 07:27:54
в этом есть проблема, что произойдет, если метка не помещается в доступное пространство? метка и флажок разделены (флажок вверху справа, а метка внизу слева). Если вы поставите флажок внутри ярлыка, у вас не возникнет этой проблемы.
Enrique 17.04.2011 23:58:41
Это не сработало до пикселя, но было достаточно прилично, чтобы заставить вещи выглядеть лучше в 3 основных браузерах. Полагаю, я мог бы потратить еще час, чтобы убедиться, что это сработает лучше ...
Alexis Wilke 7.01.2014 06:02:25

Иногда для вертикального выравнивания требуются два встроенных элемента (span, label, input и т. Д.) Рядом друг с другом для правильной работы. Следующие флажки правильно отцентрированы по вертикали в IE, Safari, FF и Chrome, даже если размер текста очень маленький или большой.

Все они плавают рядом друг с другом в одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.

Недостатком являются дополнительные бессмысленные теги 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>

211
9.06.2019 11:55:29
Спасибо! «Вертикальное выравнивание: середина» как на входе, так и в диапазоне, отлично сработало для меня.
William Gross 12.08.2010 14:42:04
display: block; float: left;кажется излишним
PHPst 18.12.2013 14:18:32
Вам не нужно использовать атрибут for, если у вас есть ввод внутри метки. Это работает без этого.
Tommy Sørensen 10.01.2016 22:02:24
Это должно быть принятым ответом по моему мнению. Там нет необходимости настройки.
Tim 29.01.2016 13:34:07
Удивительный и подтвержденный по-прежнему работает на Chrome 58 (Windows) (в отличие от текущего топ-ответа).
Jason C 5.06.2017 00:17:49

Это хорошо работает для меня:

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
6.08.2016 02:40:54
Благослови вас за использование EMS вместо пикселей.
IDisposable 31.01.2009 06:45:21

Yay спасибо! Это тоже сводило меня с ума навсегда.

В моем конкретном случае это сработало для меня:

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
29.12.2013 10:10:36

Работая над решением 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;for checkbox & radio elements - хорошая общая ценность. Я протестировал его в Chrome / Firefox / IE11 в Windows со шрифтами Arial и Calibri, используя несколько маленьких / средних / больших шрифтов.

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

185
30.01.2019 14:33:41
Просто примечание для других: это не будет работать в IE6, потому что он не поддерживает таргетинг CSS [type = checkbox].
One Crayon 8.04.2009 00:18:10
Вы можете просто добавить класс вместо использования неподдерживаемых селекторов, если требуется поддержка IE6.
HartleySan 19.08.2014 01:43:48
Этот работал для меня. Однако вместо установки «position :lative; bottom: 1px» можно использовать «margin: 0 0 1px 0» для достижения того же результата.
newman 28.04.2017 22:20:47

С флажком типа ввода, обернутым внутри метки и смещенным влево, вот так:

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

Убедитесь, что высота равна высоте строки (уровень блока).

3
29.12.2013 10:07:07

input {
    margin: 0;
}

на самом деле делает трюк

-2
29.12.2013 10:08:54
Также необходимо добавить вертикальное выравнивание: верхнее или вертикальное выравнивание: нижнее. Зависит .. от позиции, в которой нужно
maxspan 5.03.2014 22:26:59

Одна простая вещь, которая, кажется, работает хорошо, состоит в том, чтобы применить корректировку вертикального положения флажка с вертикальным выравниванием. Это будет по-разному в разных браузерах, но решение несложное.

input {
    vertical-align: -2px;
}

Ссылка

140
30.07.2015 10:09:55
Это было наименьшее изменение среди всех остальных, которое работает для меня в самых последних версиях браузеров.
Johnny_D 17.09.2014 14:37:04
Это работает даже лучше, чем с, vertical-alignи position: relativeпотому что это также работает в IE9 правильно :)
Dennis98 14.06.2015 12:38:29
но это зависит от размера шрифта. для больших размеров шрифта он должен быть настроен на более высокие отрицательные значения, например: vertical-align: -6px;
S.Serpooshan 6.12.2016 12:31:33
по-видимому, это может работать лучше с разными шрифтами, если они установленыem
YakovL 7.01.2019 21:25:27

Это не лучший способ решить проблему

vertical-align: middle

Добавление style="position:relative;top:2px;"в поле ввода переместит его вниз 2px. Таким образом, в зависимости от размера шрифта, вы можете перемещать его.

0
29.05.2013 23:04:42

position: relative; имеет некоторые проблемы в IE с z-index и анимациями, такими как slideQp / slideDown jQuery.

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
29.12.2013 10:14:08
<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>

Вы все равно должны обернуть элементы управления формой, сгруппированные в их собственные наборы полей, здесь он воспроизводит обертку. установить ввод / метку для отображения: блок, плавающий ввод влево, плавающий метка вправо, установить ширину, контролировать интервалы с левыми / правыми полями, соответственно выровнять текст метки.

так

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
}

вам, вероятно, нужно установить границы, контур и высоту линии на обоих, а также для кросс-браузерных / мультимедийных решений.

0
29.12.2013 10:12:19

Если вы используете веб-формы ASP.NET, вам не нужно беспокоиться о DIV и других элементах или фиксированных размерах. Мы можем выровнять <asp:CheckBoxList>текст, установив float:leftтип ввода CheckboxList в CSS.

Пожалуйста, проверьте следующий пример кода:

.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
29.07.2013 21:30:25

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

Хитрость заключается в том, чтобы использовать вертикальное выравнивание только в ячейках таблицы или встроенном блоке, если используется тег label.

12
28.06.2019 10:46:14

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
29.12.2013 10:08:17

Я нашел один способ сделать это, который дает тот же результат почти во всех браузерах. По крайней мере, современные браузеры. Работает в Firefox, Chrome, Safari, Opera. В IE это будет выглядеть почти так, как если бы не было никаких правил, применяемых к входам или меткам (т. Е. Метка будет на несколько пикселей ниже ввода), поэтому я думаю, что это простительно.

HTML

<label class="boxfix"><input type="radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}
-1
29.12.2013 10:20:05

Если вы используете Twitter Bootstrap, вы можете просто использовать checkboxкласс на <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
3
6.04.2013 18:31:35

Я не полностью проверил свое решение, но, похоже, оно отлично работает.

Мой 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;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Если кто-нибудь обнаружит, что это не работает, пожалуйста, дайте мне знать. Вот оно в действии (в Chrome и IE - извинения за то, что скриншоты были сделаны на сетчатке и с использованием параллелей для IE):

снимок экрана с флажками: Chrome снимок экрана с флажками: IE

20
26.09.2019 16:03:27
Это довольно старый, но так как вы попросили сообщить, это не очень хорошо работает в FireFox (флажки выше базовой линии). Возможно, вас заинтересует подробное объяснение, которое я опубликовал
YakovL 26.09.2019 16:06: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

0
29.12.2013 10:17:23

Для согласованности с полями формы в разных браузерах мы используем: box-sizing: border-box

button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
-1
29.12.2013 10:21:05

Выбранный ответ с более чем 400 ответами не работал для меня в Chrome 28 OSX, возможно, потому, что он не был протестирован в OSX или что он работал в любом месте в 2008 году, когда на этот вопрос был дан ответ.

Времена изменились, и теперь возможны новые решения CSS3. Мое решение использует псевдоэлементы для создания собственного флажка . Таким образом, условия (плюсы или минусы, как ни крути) таковы:

  • Работает только в современных браузерах (FF3.6 +, IE9 +, Chrome, Safari)
  • Полагается на специально разработанный флажок, который будет отображаться одинаково в каждом браузере / ОС. Здесь я только что выбрал несколько простых цветов, но вы всегда можете добавить линейные градиенты и тому подобное, чтобы придать ему больше удовольствия.
  • Приспособлен к определенному шрифту / размеру шрифта, который, если изменить, вы просто изменили бы расположение и размер флажка, чтобы он выглядел вертикально выровненным. При правильной настройке конечный результат должен быть почти одинаковым во всех браузерах / операционных системах.
  • Нет свойств вертикального выравнивания, нет поплавков
  • Нужно использовать предоставленную разметку в моем примере, она не будет работать, если структурирована, как вопрос, однако, макет по существу будет выглядеть одинаково. Если вы хотите переместить вещи, вы должны будете также переместить связанный 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>

Это решение скрывает флажок , а также добавляет и накладывает стили псевдоэлементов на метку, чтобы создать видимый флажок. Поскольку метка привязана к скрытому флажку, поле ввода все равно будет обновлено, и значение будет отправлено вместе с формой.

И если вам интересно, вот мое мнение о переключателях: http://jsfiddle.net/DtKrV/2/

Надеюсь, кто-то найдет это полезным!

7
26.09.2019 14:28:46

попробуй этот код

input[type="checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    margin-left:3px;
    border:0;
    vertical-align: middle;
    top: -1px;
    bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    background: #fff;
}
-1
29.12.2013 10:18:33

Я думаю, что это самый простой способ

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

10
28.06.2019 10:44:55
вопрос: хорошо ли это работает во всех браузерах? ;-)
JonSnow 29.04.2015 13:58:38

Так что я знаю, что на это уже много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. И не только 1 элегантное решение, но и 2 отдельных решения, чтобы пощекотать ваше воображение. С учетом всего сказанного, все, что вам нужно знать и видеть, содержится в 2 JS Fiddle's с комментариями.


Решение № 1 опирается на собственный «флажок» данного браузера, хотя и с изюминкой ... Он содержится в элементе div, который легче позиционировать в кросс-браузерном режиме, с переполнением: скрыт, чтобы отбросить избыток растянутого флажка на 1 пиксель (это так, что вы не можете видеть уродливые границы FF)

Простой HTML: (перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода предназначен для удовлетворения стекового потока) http://jsfiddle.net/KQghJ/

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

Решение № 2 использует «Переключатель флажков», чтобы переключать состояние CSS DIV, который был правильно расположен в браузере, и настраивается с помощью простого спрайта для состояний флажков, не отмеченных и отмеченных. Все, что нужно, это отрегулировать положение фона с помощью указанного флажка Toggle Hack. Это, на мой взгляд, более элегантное решение, поскольку у вас больше контроля над флажками и радио, и вы можете гарантировать, что они выглядят одинаково в браузере.

Простой HTML: (перейдите по ссылке, чтобы просмотреть CSS с комментариями, блок кода должен удовлетворить StackOverflow) http://jsfiddle.net/Sx5M2/

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

Если кто-то не согласен с этими методами, пожалуйста, оставьте мне комментарий, я хотел бы услышать некоторые отзывы о том, почему другие не сталкивались с этими решениями, или, если они есть, почему я не вижу здесь ответов относительно них? Если кто-то увидит, что один из этих методов потерпел неудачу, было бы неплохо это увидеть, но они были протестированы в последних браузерах и полагаются на методы HTML / CSS, которые являются довольно старыми и универсальными, насколько я видел.

2
25.01.2018 08:40:08

Жестко закодируйте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равными высоте строки метки. Если текст метки встроен, установите флажок. Firefox, Chrome и IE7 + одинаково отображают следующий пример: http://www.kornea.com/css-checkbox-align

3
9.08.2014 12:37:28
Ницца! Но вы должны подумать о копировании кода HTML и CSS здесь. Ответы, которые так сильно зависят от внешней ссылки, не приветствуются. Ссылка по-прежнему полезна для просмотра результатов, но я думаю, что показ кода здесь поможет вам получить больше голосов.
Mariano Desanze 8.08.2014 23:49:35
Нет, они не (сравните в FireFox и в Chrome, в Chrome флажки выше базовой линии), я объяснил почему
YakovL 28.06.2019 10:49:50
Почему, вы утверждаете, что это не поддерживается даже со скриншотами из обоих браузеров. Ваша работа состоит в том, чтобы предоставить доказательства для иска, когда вы делаете одно, а не для того, чтобы опровергнуть его. Я сравнил их и добавил скриншоты, но комментарии не поддерживают добавление картинок; Вы можете посмотреть на фотографии в моем ответе. Однако это может отличаться в зависимости от версии браузера, поэтому было бы полезно предоставить скриншоты с аннотациями, содержащими версии браузера.
YakovL 27.10.2019 10:20:43
Посетите страницу, на которую я ссылался в разных браузерах.
Vladimir Kornea 27.10.2019 10:46:35
Так я это сделал, а ты? :) Разве вы не видите разницу? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Хотя в FireFox они идеально выровнены, в Chrome флажок соответствует базовой линии (кстати, вы можете использовать упоминания через @, если вас интересуют более быстрые ответы)
YakovL 5.11.2019 15:13:21

Мне не нравится относительное позиционирование, потому что оно делает элемент визуализированным над всем остальным на своем уровне (он может попасть поверх чего-либо, если у вас сложный макет).

Я обнаружил, что vertical-align: subфлажки выглядят достаточно хорошо выровненными в Chrome, Firefox и Opera. Не могу проверить Safari, так как у меня нет MacOS и IE10 немного отключен, но я нашел, что это достаточно хорошее решение для меня.

Другое решение может заключаться в том, чтобы попытаться создать определенный CSS для каждого браузера и настроить его с помощью выравнивания по вертикали в% / пикселях / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

9
6.11.2014 13:59:37
Кажется, работает, пока размер шрифта не слишком велик.
robsch 27.09.2018 10:58:07