自定义复选框样式

最新推荐文章于 2019-08-30 21:55:21 发布

东海小龙

最新推荐文章于 2019-08-30 21:55:21 发布

阅读量239

点赞数 1

分类专栏： html/css

本文链接：https://blog.csdn.net/a524036174/article/details/53078918

版权

html/css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图如下
　未选中效果：　　　　　选中效果：
　　

废话不多说，直接上干货：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>复选框</title>
</head>
<style type="text/css">
    .checkBox{
        margin: 20px auto;
        width: 50%;
        text-align: center;
    }

    .checkBox input[type="checkbox"]{
        display: none;
    }

    .checkBox label{
        width: 20px;
        height: 20px;
        border: 1px solid black;
        display: inline-block;
        color: blue;
    }

    .checkBox input[type="checkbox"]:checked + label{
        color: red;
        font-weight: bold;
    }
</style>
<body>
    <div class="checkBox">
        <input type="checkBox" id="checkbox-1" />
        <label for="checkbox-1">√</label>
        <span>复选框</span>
    </div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

东海小龙

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义复选框样式

效果图如下未选中效果：选中效果：废话不多说，直接上干货：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>复选框</title></head><style type="text/css"> .checkBox{ margin: 20px
复制链接

扫一扫