前端开发CSS3实现checkbox选中效果

什么是html5前端开发
web开发前端开发需要学什么软件
网站前端开发要用到什么软件

html 代码片段

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
        <title>无标题文档</title>
        <style type=”text/css”>
            .checkbox-value {
                position: relative;
                height: 30px;
                line-height: 30px;
                padding-left: 30px;
                overflow: hidden;
            }
            .checkbox-value:before {
                transition: all 0.5s ease-in;
                content: ”;
                width: 20px;
                height: 20px;
                position: absolute;
                border: 2px solid rgb(0, 0, 0);
                border-radius: 4px;
                left: 0;
                top: 5px;
                background: #fff;
                overflow: hidden;
                cursor: pointer;
            }
            .checkbox-value:after {
                border: none;
                transition: all 0.2s ease-in;
            }
            .checkboxcon {
                position: relative;
                height: 30px;
                overflow: hidden;
                box-sizing: border-box;
                display: table;
                vertical-align: middle;
            }
            .checkbox {
                display: inline-block;
                width: 0;
                height: 0;
                opacity: 0;
                *width: 20px;
                *height: 20px;
                position: absolute;
                top: 5px;
            }
            .checkboxcon
                input[type=’checkbox’]:checked
                + .checkbox-value:before {
                transition: all 0.5s ease-in;
                content: ”;
                width: 20px;
                height: 20px;
                position: absolute;
                border: 2px solid rgba(0, 0, 0, 0.5);
                border-radius: 4px;
                left: 0;
                top: 5px;
                background: #000;
                overflow: hidden;
                cursor: pointer;
            }
            .checkboxcon
                input[type=’checkbox’]:checked
                + .checkbox-value:after {
                cursor: pointer;
                margin-top: 5px;
                margin-left: 8px;
                content: ”;
                width: 4px;
                height: 9px;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                position: absolute;
                left: 0;
                top: 5px;
                transition: all 0.2s ease-out;
            }
        </style>
        <script type=”text/javascript”></script>
    </head>
    <body>
        <!–div class=”sss”></div–>
        <label class=”checkboxcon”>
            <input class=”checkbox” type=”checkbox” />
            <div class=”checkbox-value”>请选择</div>
        </label>
    </body>
</html>
前端开发面试说什么
前端开发 大学需要考什么证件
web前端开发什么书好
» 本文来自:前端开发者 » 《前端开发CSS3实现checkbox选中效果》
» 本文链接地址:https://www.rokub.com/7386.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!