Как сделать круг в IE8, если очень надо?

#javascript #html #css

Собственно, речь о стилизации радиобаттонов и чекбоксов. Радиобаттон должен быть
круглым, но в IE8 border-radius не работает.

Вариант включать обводку в фоновую картинку не подходит, поскольку нужны обводки
разных цветов в зависимости от условий.

Какие есть альтернативы?



input[type="radio"], input[type="checkbox"] {
  display: none;
}

input[type="radio"] + label, input[type="checkbox"] + label {
  border: 1px solid green;
  display: inline-block;
  cursor: pointer;
  width: 1em;
  height: 1em;
}

input[type="radio"] + label {
  border-radius: 50%;
}

input[type="checkbox"] + label {
  border-radius: .25em;
}

input:checked + label {
  background: silver; /* На самом деле тут фоновая картинка, разная */
}














PS: Вместо :checked скрипт вешает соответствующий класс.
    

Ответы

Ответ 1

Дикая, конечно, идея: в IE8 прекрасно работает vml. Можно внутрь label поместить
vml:shape и стилизовать уже его.


Ответ 2

Для IE8 должен действовать принцип деградации! Не нужно пытаться сделать пиксель
перфект в этом древнем браузере, это лишняя и никому не нужная работа. Если у вас включен
IE8 в список поддерживаемых продуктов, то это означает что в нем просто должно всё
работать, пусть и без экстра красивостей, но просто должно.

Поймите так же следующее, попытки все красиво стилизовать в IE8 приведут только к
тому, что этот браузер (и так медленный и древний) получит еще одну тормозящую фичу.
Так же вспомните что в 99% случаев, IE8 запускается отнюдь не в вашей быстрой виртуальной
машине, а на каком-то древнем, даже реликтовом компе, который и одну вкладку еле тянет.
Пользователи таких компов сегодня радуются просто тому, что сайт вообще открылся как-то,
и им даже можно пользоваться.

UPD.
Если всё же очень нужно нарисовать, то всё равно, лучше делать это картинкой. Я помню
что у вас несколько цветов, но тут можно схитрить, скажем сделав одну белую прозрачную
картинку с круглой дырочкой в центре. Это позволит менять цвета через CSS.