【CSS样式】checkbox 自定义样式纯 css 实现，选中打勾✔

最新推荐文章于 2024-04-05 14:34:58 发布

-sea-

最新推荐文章于 2024-04-05 14:34:58 发布

阅读量1.8k

点赞数

分类专栏：前端效果的实现

本文链接：https://blog.csdn.net/qq_34695703/article/details/100557704

版权

前端效果的实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果

未选中状态 & 选中状态

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Checkbox</title>
    <meta charset="utf-8">
    <style type="text/css">
    .op {
        position: relative;
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid #3cc5b6;
        cursor: pointer;
    }
    input[type="checkbox"] {
        opacity: 0;
    }
    input[type="checkbox"]:checked + i{
        width: 12px;
        height: 12px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #3cc5b6;
    }
    input[type="checkbox"]:checked + i:after {
        content: '';
        display: inline-block;
        width: 5px;
        height: 10px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        background-color: #3cc5b6;
        transform: rotate(230deg);
        position: absolute;
        left: 3px;
        top: -1px;
    }
    </style>
</head>
<body>
    <label class="op">
        <input type="checkbox" value="like">
        <i></i>
    </label>
</body>
</html>

参考

https://www.cnblogs.com/xiaoshen666/p/10721404.html

-sea-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【CSS样式】checkbox 自定义样式纯 css 实现，选中打勾✔

实现效果未选中状态 & 选中状态全部代码<!DOCTYPE html><html lang="en"><head> <title>Checkbox</title> <meta charset="utf-8"> <style type="text/css"> ...
复制链接

扫一扫