复选框

最新推荐文章于 2020-07-18 20:49:47 发布

爱编程的兔子

最新推荐文章于 2020-07-18 20:49:47 发布

阅读量328

点赞数

分类专栏： css 页面重构技巧

本文链接：https://blog.csdn.net/wjnf012/article/details/51969633

版权

css 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

页面重构技巧

30 篇文章 0 订阅

订阅专栏

<div class="icon-check">
    <input class="c1" type="checkbox" name="" id="input-check" value="" />
    <label for="input-check">复选框</label>
</div>

.icon-check{
    display: inline-block;
}
.icon-check .c1{
    /*display: none;*//*注意，此处不能用display：none，我们应该把原来的复选框以一种不损失访问性的方式隐藏起来，使用display：none，会把它从键盘tab键切换焦点的队列中完全删除*/
    position:absolute;
    clip:rect(0,0,0,0);
}
.icon-check label{
    position: relative;
    display: block;
    font-size: 14px;
    padding-left: 24px;
}
.icon-check label:before{
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #FF0000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-top: -10px;
}
.icon-check .c1 + label:after{
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #FF0000;
    background:#FF0000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAElSURBVFhH7ZbhDYIwEIUZgREYgREYwRHcQEdwBEdwA9wANtANdAOYgPpe0ppyqYQ/lDO5Jk1swdzH1/JKUVgzA2bADJgBMxAMOOcuvpfqrACsQQ9tJKgqyGmanhGgw/iqBhBgRwE3YKxjmQmCziX9Ntg7a7LHFyOGe2mCq2I4/7tRA4ilvAt7nRo4ESuBs1IDKGNFVe7xLf2rWGEObr60KFL7c7ReKsYTQth75IArxZ5KnqMA2ydWUPiWyLOeQLEdjDkXh3K7uT0WQMUDDA4JyDEcWzJW/P35YgUAXOY2AcmpHtfe4to+n1MLNmfnLR8oy/KminDvwVj3wyant4+VNU8PyJPcmwRf899s9yRs6vlaiS3QJoM8mxkrZAbMgBkwAzoMfAB0fkWZj4GYcAAAAABJRU5ErkJggg==") no-repeat center;
    background-size: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-top: -10px;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
}
.icon-check .c1:checked + label:after{
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

效果：
这里写图片描述

2018年8月2日更新：

.icon-check .c1{
    /*display: none;*//*注意，此处不能用display：none，我们应该把原来的复选框以一种不损失访问性的方式隐藏起来，使用display：none，会把它从键盘tab键切换焦点的队列中完全删除*/
    position:absolute;
    clip:rect(0,0,0,0);
}