Илья!

Надёжного решения, сохраняющего родные «шкурки» системы и браузера, я не знаю, и сделал бы всё картинками, стилизовав все другие радиогруппы на сайте. Достаточно просто сверстать эти кнопки «пиксель в пиксель», используя обычные картинки, ЦСС 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;
  /* * — для ИЕ 7− */
  *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;
}

Главная проблема в том, что кнопки непредсказуемо съезжают в разном окружении, несмотря на стили. Я не поленился бы расставить их по местам грязными хаками в каждом отдельном браузере, но не готов советовать этот путь другим.

Быть может, уважаемые советчики подскажут лучшее решение?