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


1735

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

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


7
Поместите каждый флажок и метку в элемент <li>. Добавьте переполнение: скрыто в <li> и поместите метку и флажок слева. Тогда они все идеально выровняются. Не устанавливайте флажок внутри элемента label, очевидно.
первый том

5
Я получил это с помощью heightи line-heightатрибутов, посмотрите jsfiddle.net/wepw5o57/3
TheGr8_Nik

Манипуляция с positionи topрешит эту проблему Пример: jsfiddle.net/ynkjc22s
Profesor08

2019. все та же проблема. все еще нужны некоторые хаки, чтобы заставить это работать :(
dieter

@dieter посмотри мой ответ, я объяснил, зачем нужны хаки и какой подход не хакерский: stackoverflow.com/a/56558431/3995261
YakovL

Ответы:


1010

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

  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.
  • В зависимости от размера текста, вам, без сомнения, потребуется настроить относительное положение, ширину, высоту и т. Д., Чтобы все выглядело правильно.

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


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

306
Боже мой, я не понял, сколько людей не знали об этом: если вы заключаете ввод в тег label, атрибут «for» не нужен. Не стесняйтесь увидеть сами: w3.org/TR/html401/interact/forms.html#h-17.9.1
Один

10
Я не согласен с предложением об использовании условных комментариев. Держите хак * foobar CSS. Это хорошо работает, используется фреймворками, такими как YUI, и позволяет хранить вместе то, что принадлежит друг другу.
ebruchez

50
Попробовал это в Chrome 28, Mac OSX, и флажок заметно ниже, чем текст
MusikAnimal

9
Обратите внимание, что это не работает в последних версиях Chrome (я использую v36). i.imgur.com/y9Ffxsh.png Редактировать: ни Firefox (v31)
Ганс

214

Иногда для вертикального выравнивания требуются два встроенных элемента (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>


19
Спасибо! «Вертикальное выравнивание: середина» как на входе, так и в диапазоне, отлично работает для меня.
Уильям Гросс

6
display: block; float: left;кажется излишним
PHPst

4
Вам не нужно использовать атрибут for, если у вас есть ввод внутри метки. Это работает без этого.
Томми Соренсен

6
Это должно быть принятым ответом по моему мнению. Там нет необходимости настройки.
Тим

4
Удивительный и подтвержденный по-прежнему работает на Chrome 58 (Windows) (в отличие от текущего топ-ответа).
Джейсон С

188

Работая над решением 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>


10
Просто примечание для других: это не будет работать в IE6, потому что он не поддерживает таргетинг CSS [type = checkbox].
Один карандаш

3
Вы можете просто добавить класс вместо использования неподдерживаемых селекторов, если требуется поддержка IE6.
HartleySan

1
Этот работал для меня. Однако вместо установки «position :lative; bottom: 1px» вы можете использовать «margin: 0 0 1px 0» для достижения того же результата.
Ньюман

142

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

input {
    vertical-align: -2px;
}

Ссылка


9
Это было наименьшее изменение среди всех остальных, которое работает для меня в самых последних версиях браузеров.
Johnny_D

6
Это работает даже лучше, чем с, vertical-alignи position: relativeпотому что это также работает в IE9 правильно :)
Dennis98

5
но это зависит от размера шрифта. для больших размеров шрифта он должен быть настроен на более высокие отрицательные значения, например: vertical-align: -6px;
С.Серпушан

1
по-видимому, это может работать лучше с разными шрифтами, если они установленыem
YakovL

92

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

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

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


<label for="blah">необходимо только в том случае, если вы используете что-то, для чего не имеет смысла переносить метку (например, текстовое поле; я обычно буду использовать <label for="blah">Foo</label><input id="blah" type="text" />в этом случае). С флажками я считаю, что это меньше разметки, чтобы обернуть его.
один карандаш

13
Не совсем верно: Label-for позволит пользователям щелкнуть метку, чтобы установить флажок, в дополнение к простому щелчку на самом флажке. Это очень удобно для связывания двух элементов вместе.
EndangeredMassa

26
Если вход вложен в метку, то щелкнув по метке с активировать / выделить фокус для ввода; Атрибут for предназначен исключительно для случая, когда входные данные не являются вложенными.
Один карандаш

3
Это верно, One Crayon, но все же рекомендуется использовать атрибут «for», иначе у вас будут проблемы с некоторыми браузерами, которые не распознают этот синтаксис, кашляющий IE.
Армстронгест

если вы не хотите, чтобы у вашего флажка был идентификатор, вам нужно обернуть флажок внутри ярлыка
Simon_Weaver

39

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


3
Интересно; Мне нравится идея плавать оба элемента; это элегантно решает проблему с упаковкой. Я имею в приложенный к оборачивать вход с этикеткой, но этот код чертовски уборщиком много , чем решение , которое я прибыл в.
Один карандаш

в этом примере флажок ввода и метка также должны иметь свойство display: block, и в этом случае они будут обрабатываться как обычные DIV, которые можно легко
выровнять

5
в этом есть проблема, что произойдет, если метка не помещается в доступное пространство? метка и флажок разделены (флажок вверху справа, а метка внизу слева). Если вы поставите флажок внутри ярлыка, у вас не возникнет этой проблемы.
Энрике

Это не сработало до пикселя, но было достаточно прилично, чтобы заставить вещи выглядеть лучше в 3 основных браузерах. Полагаю, я мог бы потратить еще час, чтобы убедиться, что это сработает лучше ...
Алексис Уилк

26

Единственное идеально работающее решение для меня:

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

Протестировано сегодня в Chrome, Firefox, Opera, IE 7 и 8. Пример: Fiddle


22

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

Мой 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


1
Это довольно старый, но так как вы попросили сообщить, это не очень хорошо работает в FireFox (флажки выше базовой линии). Возможно, вас заинтересует подробное объяснение, которое я написал
YakovL

20

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

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>

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


высота строки, дух. Всегда забудь об этом. Хорошая работа, отлично работает.
Крейг

13

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


11

Давайте наконец посмотрим на источник проблемы

Флажки отображаются с помощью изображений (можно установить пользовательские с помощью CSS). Вот (не отмеченный) флажок в FireFox, выделенный инспектором DOM:

это просто квадрат

И вот такой же неустановленный флажок в Chrome:

это нецентрированный квадрат с "полями" справа и снизу

Вы можете увидеть поле (оранжевый); отступа нет (будет показано зеленым). Так что же это за псевдо-поле справа и снизу флажка? Это части изображения, используемые для флажка . Вот почему с помощью простоvertical-align: middle не достаточно, и это является источником кросс-браузерных проблем.

Так что мы можем с этим поделать?

Один очевидный вариант - заменить изображения! К счастью, это можно сделать с помощью CSS и заменить их внешними изображениями, изображениями base64 (in-CSS), SVG в CSS или просто псевдоэлементами. Это надежный (кросс-браузерный!) Подход, и вот пример такой настройки, украденной из этого вопроса :

.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 (??):

для увеличения = 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,3 пикселей
  • На основе хрома: 12,8 пикселя в целом, следовательно, 12,8 (100% - 14%) = 11 пикселей для того, что визуально воспринимается как флажок
  • IE 11, Edge: 13px
  • 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. Мое последнее предложение: используйте вместо этого пользовательские флажки - и вы избежите разочарования :)


Этот ответ такой глубокий!
Мареки

10

Теперь, когда 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>


Вот полная демонстрационная версия с префиксом:


10

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

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


вопрос: хорошо ли это работает во всех браузерах? ;-)
JonSnow

9

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

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

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


Кажется, работает, пока размер шрифта не слишком велик.
Робс

9

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

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>


8
Благослови вас за использование EMS вместо пикселей.
IDisposable

7

Выбранный ответ с более чем 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/

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


6

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

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

4
Как я уже говорил предыдущим авторам, которые рекомендовали это: мне это не нравится, потому что это требует ненужной разметки. Кроме того, я попробовал эту разметку, но было трудно предотвратить наложение метки под входом (при этом каждая группа меток / ввода оставалась на своих собственных строках).
Один карандаш

7
Итак, вместо «ненужной» разметки (используемой, вероятно, почти всеми), вы бы предпочли ненужный CSS?
Роберт С. Барт

10
Проблема с обертыванием стендов. Но в целом, да, я бы предпочел иметь посторонний CSS, а не разметку, поскольку CSS кэшируется, но разметку, возможно, придется загружать заново для каждой новой страницы.
Один карандаш

4
Сравните: 1 экземпляр дополнительного CSS -vs- много экземпляров дополнительной разметки.
Грег

6

Если вы используете ASP.NET Web Forms, вам не нужно беспокоиться о 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>

3

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

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

3

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

<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

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


Ницца! Но вы должны подумать о копировании кода HTML и CSS здесь. Ответы, которые так сильно зависят от внешней ссылки, не приветствуются. Ссылка по-прежнему полезна для просмотра результатов, но я думаю, что показ кода здесь поможет вам получить больше голосов.
Мариано Дезанце

Нет, они не (сравните в FireFox и в Chrome, в Chrome флажки выше базовой линии), я объяснил почему
YakovL

Почему, вы утверждаете, что это не поддерживается даже со скриншотами из обоих браузеров. Ваша работа состоит в том, чтобы предоставить доказательства для иска, когда вы делаете одно, а не для того, чтобы опровергнуть его. Я сравнил их и добавил скриншоты, но комментарии не поддерживают добавление картинок; Вы можете посмотреть на фотографии в моем ответе. Однако это может отличаться в зависимости от версии браузера, поэтому было бы полезно предоставить снимки экрана с аннотациями, содержащими версии браузера.
YakovL

Посетите страницу, на которую я ссылался в разных браузерах.
Владимир Корнеа

Я так и сделал, а ты? :) Разве вы не видите разницу? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Хотя в FireFox они идеально выровнены, в Chrome флажок соответствует базовой линии (кстати, вы можете использовать упоминания через @, если вас интересуют более быстрые ответы)
ЯковЛ


2

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

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

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


2

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

Следующее обеспечивает безупречную согласованность между браузерами, даже 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;}

Протестировано в последних версиях Chrome, Safari и Firefox для Mac, Windows, Iphone и Android. И IE9.

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


хм, это выглядит хорошо, когда метка начинается со строчной буквы, но если она начинается с заглавной, это намного хуже. Не могли бы вы добавить сюда фрагмент?
YakovL

2

Поэтому я знаю, что на это уже много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. И не только 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, которые являются довольно старыми и универсальными, насколько я видел.


1

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

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

Использовать просто vertical-align: sub, так как покришка уже предложена.

скрипка

HTML-код:

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

Код CSS:

.checkboxes input {
    vertical-align: sub;
}

1

Простое решение:

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.