使用CSS实现自定义input[checkbox]样式

最新推荐文章于 2024-05-07 09:22:09 发布

weixin_30344131

最新推荐文章于 2024-05-07 09:22:09 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/milo-wjh/p/6667400.html

版权

思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式；

兼容：

：after 兼容IE8+

: checked 兼容IE9+

综上述：自定义样式兼容IE9+

可使用IE8hack的方式，让IE8-使用原来的checkbox样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .label1 {
            position: relative;
        }
        .label1:after {
            position: absolute;
            top: 0px;
            left: -22px;
            width: 16px;
            height: 16px;
            background: #ededed;
            border: 1px solid #dcdcdc;
            content: '';
        }
        form input[type='checkbox']:checked + .label1:after {
            background: red;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="checkbox" name="a" id="a1" onchange="check()">
        <label class="label1" for="a1">记住密码</label>
    </form>

</body>
</html>

使IE8-能够正常使用原本样式的checkbox方法：

上方代码使用after伪元素覆盖了input，并没有使用css隐藏掉input，为的就是在IE8-的时候能隐藏为元素，使用原来的checkbox，这里就要运用到单独为IE8书写的hack了

    .label1 {
            position: relative;
            color: red\0;  /*IE8+都能使用这条样式,这行需写在IE7hack之上，在win10中测试的时候发现，IE7执行了该行样式，但是数值为空*/
            +color: red;    /*IE7才能使用这条样式*/
        }
        form:nth-child(1) .label1 {  /* IE9+才能使用的样式*/
            color: green;
        }
结构参考上面的代码

如上样式，在IE7和IE8中字体为红色，IE9+和其他常用浏览器则为绿色，这样就能达到在低版本浏览器中使用自带checkbox，高版本浏览器使用自定义样式的checkbox了，还是挺使用的；

如果有更好的实现和兼容方式，请在评论中告知，谢谢了；

一些漂亮的样式可以参考下这个博客

http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml

转载于:https://www.cnblogs.com/milo-wjh/p/6667400.html

weixin_30344131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现自定义input[checkbox]样式

思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式；兼容：：after 兼容IE8+ : checked 兼容IE9+ ...
复制链接

扫一扫