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

StackOverflow https://stackoverflow.com/questions/306252

Вопрос

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

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

Это было полезно?

Решение

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

  1. Входные данные должны быть на их собственной линии.
  2. Входные данные флажка должны совпадать по вертикали с текстом метки аналогичным образом (если не идентично) во всех браузерах.
  3. Если текст метки переносится, у него должен быть отступ (поэтому не переносите его вниз под флажком).

Прежде чем я перейду к каким-либо объяснениям, я просто дам вам код:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Вот рабочий пример в JSFiddle ( Ошибка ).

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

На что следует обратить внимание:

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

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

Другие советы

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

Теперь, если бы у вас был очень длинный текст метки, который необходимый чтобы выполнить перенос без переноса под флажком, вы бы использовали отступы и отрицательный текстовый отступ на элементах label:

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

Отработка Решение одного карандаша, У меня есть кое - что , что работает для меня и проще:

.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; для флажков и радиоэлементов это хорошее общее значение.Я протестировал это в Chrome / Firefox / IE11 в Windows со шрифтами Arial & Calibri, используя несколько размеров шрифта small / mid / large.

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

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

input {
    vertical-align: -2px;
}

Ссылка

попробуй vertical-align: middle

кроме того, ваш код выглядит так, как и должен быть:

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

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

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

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

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

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

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

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

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

Мой 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 - приношу извинения, поскольку скриншоты были сделаны на retina и с использованием parallels для IE):

screenshot of checkboxes: Chrome screenshot of checkboxes: IE

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

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

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

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>

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

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

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

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

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

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

Просто хотел добавить к обсуждению атрибута 'for' на ярлыках (слегка оффтопичный):

Пожалуйста, предоставляйте его, даже если в этом нет необходимости, потому что его очень удобно использовать из javascript:

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

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

Только мои 2 цента.

Если вы используете ASP.NET Веб - формы вам не нужно беспокоиться о DIVs и других элементах или фиксированных размерах.Мы можем выровнять <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>

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

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

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

Ваш HTML-код:

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

Ваш CSS:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

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

jsFiddle ( Ошибка ): http://jsfiddle.net/SgXYY/6/

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

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

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

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

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

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

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

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

это сработало для меня:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

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

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

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

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

it

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

it&#39;s an uncentered square with

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

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

Один из очевидных вариантов – заменить изображения!К счастью, это можно сделать с помощью CSS и заменить их внешними изображениями, изображениями base64 (в 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 (на базе 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,0 пикселя в абсолютных единицах.Однако точность может быть поставлена под сомнение:попробуйте разные значения zoom для флажка.В моих тестах как в Chrome, так и в Vivaldi относительный размер псевдополя сильно отличается при zoom значения 10, 20 и при значениях 11-19 (??):

for zoom = 10 it while for zoom = 11 it

scale кажется, более последовательным:

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

так что, вероятно, ~ 14% и 2 пикселя - это правильные значения.

Теперь, когда мы знаем (?) размер псевдополя, давайте отметим, что этого недостаточно.Одинаковы ли размеры значков флажков для всех браузеров?Увы!Вот что показывает DOM inspector для нестайлинговых флажков:

  • FireFox: 13.3 пикселей
  • На основе хрома: 12,8 пикселей для всего этого, следовательно, 12,8 (100% - 14%) = 11 пикселей для того, что визуально воспринимается как флажок
  • IE 11, Край: 13 пикселей
  • Сафари:n / a (я полагаю, их следует сравнивать на одном экране)

Теперь, прежде чем мы обсудим какие-либо решения или хитрости, давайте спросим:что такое правильный выравнивание?Чего мы пытаемся достичь?В какой-то момент это дело вкуса, но в принципе я могу вспомнить следующие аспекты "приятных" выравниваний:

текст и флажок на одной базовой линии (я намеренно не настраиваю здесь размер флажка):

enter image description here

или иметь ту же среднюю строку в виде строчных букв:

enter image description here

или одна и та же средняя строка с точки зрения заглавных букв (так легче увидеть разницу при разном размере шрифта):

enter image description here

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

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

enter image description here

Итак, какими инструментами мы располагаем для:

  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:

    comparing vertical-align: top and bottom

    (на картинке:выравнивание по вертикали:верх, низ и низ без рамки-тени)

Итак, какой результат мы получаем от этого?

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

Приведенный выше фрагмент работает с Chrome (браузерами на основе Chromium), но другие браузеры требуют меньшего размера флажка.Кажется невозможным настроить как размер, так и выравнивание по вертикали таким образом, чтобы это работало в обход особенностей изображения Chromium с флажками. Мое последнее предложение таково:используйте вместо этого пользовательские флажки – и вы избежите разочарования :)

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

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

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

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>

Приведенный выше код разместит элементы вашего списка в threecols и просто изменит ширину по своему усмотрению.

Следующее обеспечивает идеальную согласованность пикселей во всех браузерах, даже в IE9:

Подход вполне разумный, вплоть до очевидности:

  1. Создайте входные данные и метку.
  2. Отобразите их в виде блоков, чтобы вы могли перемещать их по своему усмотрению.
  3. Установите для height и line-height одинаковое значение, чтобы убедиться, что они расположены по центру и выровнены по вертикали.
  4. Для em измерения, чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и она не должна сама устанавливаться в em measurements.

Это приводит к глобально применимому общему правилу:

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.

Этот метод, вероятно, применим ко всем типам ввода, размер которых не превышает одной строки текста.Примените правило типа в соответствии с требованиями.

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

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

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

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

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

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

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

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

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

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

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

position: relative; имеет некоторые проблемы в IE с z-index и анимациями, такими как slideUp / 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 - 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.

Используйте просто 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;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top