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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

Если вы используете 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>

Answer 6

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

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

Answer 7

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

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

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

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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