Xiper

Отступы у checkbox и radio

Автор: Евгений Рыжков Дата публикации:

Одно из самых нелюбимых занятий тысяч верстальщиков — верстка форм. Одной из причин этого — это непослушные поля checkbox и radio, которые плохо поддаются выравниванию и имеют непонятные отступы. Сравним как себя ведут эти поля в разных браузерах по умолчанию (обращаем внимание на выравнивание полей по одной вертикальной линии):

выравнивание checkbox и radio в ff 3.5
выравнивание checkbox и radio в ff 3.5
выравнивание checkbox и radio в opera 10
выравнивание checkbox и radio в opera 10
выравнивание checkbox и radio в ie 6
выравнивание checkbox и radio в ie 6

Чтобы кроссбраузерно избавиться от отступов у checkbox и radio, добавляем им класс checkAndRadio:

.checkAndRadio {
margin-left: 0;
//width: 12px; /* хак для ие6 и 7 */
}

Обнуление отступа слева (margin-left) для IE недостаточно, необходимо явно задать ширину. Ширину указываем только для IE, чтобы не портить вид полей в других браузерах (таких как opera).

Заметки

  • чтобы в данной форме кроссбраузерно все три поля были по одной линии (input type=text, input type=checkbox, input type=radio) необходимо и для input type=text обнулить отступ слева (для safari и chrome)
  • в боевых условиях не используем хак для IE, применяй условные комментарии

Проверено в:

Материалы

  • fixing IE checkbox padding/margin