14 июл. 2008 г.

Выравнивание чекбоксов и радиобаттонов с их лэйблами

Всегда, даже работая в Студии, как-то обходил эту проблему стороной.

Но тут перфекфионизм взял верх и решил, наконец, сделать «круто». Вкратце, в чем состоит проблема — у одних браузеров (ie, opera) есть некоторый отступ у чекбоксов и радиобаттонов (который нельзя ничем сбросить), у других нет.

Кусок исходного html-кода:

... <dl> <dt> <label>Пол</label> </dt> <dd> <div class="option"> <input type="radio" name="sex" id="sex-male" value="male" /> <label for="sex-male">мужской</label> </div> <div class="option"> <input type="radio" name="sex" id="sex-female" value="female" /> <label for="sex-female">мужской</label> </div> </dd> </dl> ...

Решение для «нормальных» браузеров:

.option { position: relative; } .option input { position: absolute; left: 0; top: 0.69em; // Величина сдвига подобрана для line-height: 1.2 margin: -4px 0 0; } .option label { margin-left: 18px; }

Теперь нужно «разобраться» с ie и opera, имеющих пресловутые отступы. Начнем c ie:

.option input { // margin: -7px 0 0 -3px; }

Кто использует conditional comments — выносит вышестоящую конструкцию в файл стилей для ie.

Осталась opera. Долго искал какой-нибудь хак для нее, самым красивым, с моей точки зрения, оказался следующий (такую конструкцию не понимает ни один браузер, кроме opera):

html:first-child .option input { margin: -7px 0 0 -3px; }

И вуаля, везде красота! Даже при масштабировании шрифта.

P.S. Никогда не пишите в css конструкцию вида: * { padding: 0 }. Если вам, конечно не все равно, как выглядят ваши формы в Firefox. Firefox сбрасывает внутренний отступ у input, а у select не сбрасывает. Потом будет проблематично их выровнять по высоте.

9 комментариев:

admin комментирует...

Как раз недавно боролся с этой проблемой. После нескольких часов попиксельного подгона и шаманства с margin/padding наткнулся на довольно простой и гениальный трюк: достаточно установить у input и его label свойство vertical-align:middle;
Как-то так:
.container input, .container label {
vertical-align:middle;
}

Специально проверял по browsershots.org - во всех современных браузерах работает на ура, в некоторых экзотических браузерах, правда есть небольшие смещения.

dfilatov81 комментирует...

А можно пример увидеть с vertical-align? Насколько я помню, это, все-таки, не везде работает

admin комментирует...

Ну, чтобы далеко не ходить, из Ваших же примеров работы zform:
http://www.nomos.ru/personal/autocredit/form/

dfilatov81 комментирует...

Открыл в firefox3 (под macos) и вижу что чекбоксы и, особенно, радиобаттоны находятся выше чем лэйблы

Stepan комментирует...

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

dfilatov81 комментирует...

Добавь display: block для label

Stepan комментирует...

>> Добавь display: block для label

Тогда будет пустота кликаться возле лейбла, что мне не нравится :)

Я короче убрал margin-left у label и добавил padding-left у .option. И для IE еще zoom у .option

Petya комментирует...

К слову сказать, если вам когда-нибудь понадобится заблокировать чей-либо сотовый телефон или другое средство связи, то воспользуйтесь для этого Блокираторы мобильной связи.

Анонимный комментирует...

Спасибо за ценный код - вставил почти не меняя, все работает. если есть граммар-наци, то я - дезигн-наци :)