1

Добрый вечер, как изменить внешний вид checkbox для IE7++? (без js)
вот пример http://jsfiddle.net/d8mWP/ только на :before =IE9

input[type="checkbox"],
input[type="radio"] {
    display:none;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
    line-height: 20px;
    vertical-align: top;
    cursor: pointer;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    position: absolute;
    max-width: 120px;
    height: 20px;
    overflow: hidden;
}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    height: 18px;
    width: 18px;
    margin: 0 5px 0 0;
   /* background-image: url("img/sprite.png");
    background-repeat: no-repeat;*/
    background-color:red;
}



input[type="checkbox"] + label::before {
      background-color:red;
}
input[type="radio"] + label::before {
         background-color:red;
}
input[type="checkbox"]:checked + label::before {
    background-color:green;
}
input[type="radio"]:checked + label::before {
     background-color:green;
}
<ul>
<li>
    <input type="checkbox" value="Y" name="arr1" id="arr1"/>
    <label for="arr1">Весна-лето 1</label>
</li>
<li>
    <input type="checkbox" value="Y" name="arr2" id="arr2"/>
    <label for="arr2">Весна-лето 2</label>
</li>
<li>
    <input type="checkbox" value="Y" name="arr3" id="arr3"/>
    <label for="arr3">Весна-лето 3</label>
</li>
</ul> 

2
  • Бессмысленное дело затеяли. Если вместо ::before/:before еще можно какой-то костыль сделать, то вот :checked на css заменить нечем. А осел до 9-ой версии этот селектор не понимает. Поэтому без JS - тут крайне сложно что-то придумать.
    – Deonis
    21 июл 2013 в 20:26
  • Без js незнаю способа,но с ним самый легкий xiper.net/collect/html-and-css-tricks/verstka-form/…
    – zloctb
    21 июл 2013 в 21:03

1 ответ 1

2

Без js библиотеки, которая заставит понимать это значение никак. А еще лучше не задавать специального оформления для ie7. Изящная деградация для этого осла в самую тему.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.