自定义复选框在IE 7和IE 8中不起作用

时间:2013-04-10 15:49:13

标签: html css

我在HTML上创建了自定义复选框,它在IE 9,IE 10和其他最新版本的浏览器上运行良好。但是当我尝试在IE 7和IE 8上运行它时,它无法正常工作。看到图片。我所做的?请帮帮我!

enter image description here

我的CSS和HTML代码如下所示

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>

1 个答案:

答案 0 :(得分:1)

正如Adrift和Matthew指出的那样,你所包含的许多风格都不适用于ie7&amp; 8.在我看来,对于大多数应用来说没问题,因为它们仍然有用,人们不应该使用ie7&amp; 8无论如何。

如果您需要它可以工作,但是,您可以使用javascript方法:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/