Илья!
Надёжного решения, сохраняющего родные «шкурки» системы и браузера, я не знаю, и сделал бы всё картинками, стилизовав все другие радиогруппы на сайте. Достаточно просто сверстать эти кнопки «пиксель в пиксель», используя обычные картинки, ЦСС 3 или СВГ.
Если это неприемлемо и надо отталкиваться от настоящих элементов, я бы искал способ подложить копьё и зеркало под абстрактные радиокнопки, выравняв их относительно центра. Вот что у меня получилось в первом приближении:
Cкриншот кнопок в Виндоусе с классической темой оформления, браузер — ИЕ:

Виндоус 7, кнопки поехали:

Опера на Маке, тоже есть, что подвигать:

Хром и Сафари, красота:

Айпад, нужен вектор:

ХТМЛ получился таким:
<div class="radio">
<label>
<span class="input">
<input type="radio" name="plotnikov" checked>
</span>
<span class="label">не указан</span>
</label>
</div>
<div class="radio">
<label>
<span class="input input--male">
<input type="radio" name="plotnikov">
</span>
<span class="label">мужской</span>
</label>
</div>
<div class="radio">
<label>
<span class="input input--female">
<input type="radio" name="plotnikov">
</span>
<span class="label">женский</span>
</label>
</div>
ЦСС:
.radio {
display: table-row;
*display: block;
*zoom: 1;
font-family: Verdana, sans-serif;
font-size: 11px;
}
.radio .input {
display: table-cell;
*display: inline;
*zoom: 1;
width: 28px;
height: 28px;
text-align: center;
vertical-align: middle;
}
.radio .input--male,
.radio .input--female {
background: url('sex.sprite.png') no-repeat;
}
.radio .input--male {
background-position: -28px 0;
}
.radio .input--female {
background-position: 0 0;
}
.radio .input input {
margin: 0;
}
.radio .input input:not(:checked) {
background: #fff;
}
.radio .label {
display: table-cell;
*display: inline;
*zoom: 1;
height: 28px;
vertical-align: middle;
}
Главная проблема в том, что кнопки непредсказуемо съезжают в разном окружении, несмотря на стили. Я не поленился бы расставить их по местам грязными хаками в каждом отдельном браузере, но не готов советовать этот путь другим.
Быть может, уважаемые советчики подскажут лучшее решение?
|