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

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

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

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

Answer 2

Я нашел единственный способ выстроить их в ряд, используя абсолютную позицию для ввода. Игра с верхней переменной input дала желаемый результат.

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}

Answer 3

input {
    margin: 0;
}

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

Answer 4

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

vertical-align: middle

---

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

Answer 5

Я нашел один способ сделать это, который дает одинаковый результат почти во всех браузерах. По крайней мере, современные браузеры. Работает в 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 */
}

Answer 6

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

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

Answer 7

Может быть, некоторые люди делают ту же ошибку, что и я? Что было ... Я установил ширину для полей ввода, потому что они были в основном типа «текст», но потом забыл переопределить эту ширину для флажков - поэтому мой флажок пытался занять много лишней ширины и поэтому было трудно выровнять ярлык рядом с ним.

.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

Answer 8

Для согласованности с полями формы в браузерах мы используем: Размер поля: 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;
}