CODEWITHSUNDEEP
htmlcss
Pravesh Singh
Pravesh Singh

Reputation: 324

Custom checkbox not working in IE 7 and IE 8

I have created custom check-box on HTML, that's working fine on IE 9 , IE 10 and other latest version browser. But when I try to run it on IE 7 and IE 8, it not working. see in image. What i do? Please help me!

enter image description here

My CSS and HTML code are given below

CSS

    .ckbox
{
    width: 25px;
    height: 25px;
}
.custom-checkbox
{
    position: relative;
    display: inline-block;
}

.custom-checkbox > .box
{
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    background-color: #FFF;
    padding: 0px;
    margin: 0px;
}

.custom-checkbox > .box > .tick
{
    position: absolute;
    left: 4px;
    top: 7px;
    width: 14px;
    height: 6px;
    border-bottom: 4px solid #000;
    border-left: 4px solid #000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: none;
}

.custom-checkbox > input:checked + .box > .tick
{
    display: block;
}

.custom-checkbox > input
{
    position: absolute;
    outline: none;
    left: 0;
    top: 0;
    padding: 0;
    width: 25px;
    height: 25px;
    border: none;
    margin: 0;
    opacity: 0;
    z-index: 1;
}

HTML 

<table style="background-color: #E5E5E5;">
        <tr>
            <td>
                <span class="custom-checkbox">
                    <input id="fileItem" name="fileItem" type="checkbox" class="ckbox" value="1" checked="checked" />
                    <span class="box"><span class="tick"></span></span>
                </span>
                <input id="fileId" name="fileId" type="hidden" value="" />
            </td>
            <td>
                <label for="fileItem" title="">
                    Check</label>
            </td>
        </tr>
    </table>

Upvotes: 0

Views: 6739

Answers (1)

Julian K
Julian K

Reputation: 2001

As Adrift and Matthew pointed out, many of the styles you included won't work for ie7 & 8. In my opinion, for most applications that's fine, since they'll still work, and people shouldn't be using ie7 & 8 anyways.

If you need it to work in ie, though, you can use a javascript approach: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Upvotes: 1

Related Questions