模拟复选框

最新推荐文章于 2021-08-20 11:43:55 发布

郭晓湉

最新推荐文章于 2021-08-20 11:43:55 发布

阅读量698

点赞数 1

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/xtqueen/article/details/77718973

版权

HTML5 专栏收录该内容

31 篇文章

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

label {
    background-color: #fafafa;
    border: 1px dashed #cacece;
    box-shadow: 0 1px 2px silver;
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;

}

.regular-checkbox:checked + label:after {
    content: url(images/tupian5_01.png);
    font-size: 36px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #5056de;
}
.regular-checkbox {
    display: none;
}
    </style>
</head>
<body>
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox">
    <label for="checkbox-1-1"></label>
</body>
</html>