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

Question

Это одна из мелких проблем CSS, которая постоянно мучает меня. Как люди вокруг переполнения стека вертикально выравнивают checkboxes и их labels последовательно кросс-браузер ? Всякий раз, когда я корректно выравниваю их в Safari (обычно с помощью vertical-align: baseline на input), они полностью отключаются в Firefox и IE. Исправьте это в Firefox, и Safari и IE неизбежно испортятся. Я трачу время на это каждый раз, когда кодирую форму.

Вот стандартный код, с которым я работаю:

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

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

Answer 1

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

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

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

Answer 2

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 3

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

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

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

Answer 4

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>

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

Answer 5

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

Answer 6

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

Fiddle

HTML код:

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

Код CSS:

.checkboxes input {
    vertical-align: sub;
}

Answer 7

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

JQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Для стиля, возможно, нужны настройки в зависимости от размера шрифта, используемого в <label>

PS:
Я использую ie7js , чтобы заставить css работать в IE6.