Question

Friends can you help me solve this small issue please.
I am using opencart and my products require the buyer to chose color before add cart.

Normally we use LI with a href to make color boxex with onclick select even but Since Opencart allow only form elements for such requirements i.e. select, check, radio etc therefore i used Radio buttons with CSS.
It works fine on Mozilla, Chrome and even on IE9 …. BUT not on IE8 & IE7 🙁

here is the HTML of Radio buttons after compiled

<div class="option Color" id="option-227">
<span class="required">*</span>
<h2>Color:</h2><br>

<div class="colorOption-Holder">
<input type="radio" id="option-value-18" value="18" name="option[227]">
<label for="option-value-18">
<img src="../images/Swatches/Green-25x25.gif" alt="Green" title="Green">
</label>
</div>

<div class="colorOption-Holder">
<input type="radio" id="option-value-18" value="18" name="option[227]">
<label for="option-value-18">
<img src="../images/Swatches/Blue-25x25.gif" alt="Blue" title="Blue">
</label>
</div>

</div>

And here is the CSS

.product-info .Color .colorOption-Holder {
float:left;
width:35px;
height:35px;
margin-right:7px;
margin-bottom:9px;
position:relative;
}
.product-info .Color input{
position:absolute;
left:5px;
top:10px;
visibility:hidden;
z-index:5;
}

.product-info .Color input + label {
position:absolute;
left:0;
top:0;

border:1px solid #fff;
}

.product-info .Color input:checked + label {
position:absolute;
left:0;
top:0;
z-index:5;
border:1px solid #f76a02;
}

Any Idea how to fix this ?
it would be a big favor … thanks

Answer 1

internet explorer 8 (and previous versions) does not support many CSS selectors. the :checked pseudo class is one of them.

Check this similar post for a solution called Selectivizr which allows you to add selectors support for different IE versions.

You should check quirks-mode for browser support of different selectors when you don’t stick with the “usual” ones.