使用 before 和 after 实现图片选择框，单选框和多选框

最新推荐文章于 2023-11-15 08:30:23 发布

杏子姐_1024

最新推荐文章于 2023-11-15 08:30:23 发布

阅读量495

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44135121/article/details/102668157

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用 before 和 after 实现图片选择框，单选框和多选框

前言
图片选择框样式
单选框样式
多选框样式
完整代码如下

前言

在前端应用中，原生的图片选择框，单选框和多选框样式比较单一。
如下图所示：
在这里插入图片描述
那么如果想要实现比较丰富的选择框样式，应该如何去复写样式昵，本文通过伪元素 :before 和 :after 实现各种好看的选择框。
如下图所示：

图片选择框样式

    /*以下样式的结合设置成文件选择框*/
    #container > #add {
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left: 10%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, 10%);
    }

    #container > #add:before {
        background: #ddd;
        content: "";
        width: 100px;
        height: 5px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

    #container > #add:after {
        background: #ddd;
        content: "";
        width: 5px;
        height: 100px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

单选框样式

  /*以下样式的结合设置单选框*/
    #container > #radio {
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left: 10%;
        width: 100px;
        height: 100px;
        transform: translate(-50%, 10%);
        margin-top: 50px;
        background: #03A9F4;
        border-radius: 50%;
    }

    #container > #radio:before {
        background: #fff;
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

多选框样式

    /*以下样式的结合设置多选框*/
    #container > #checkbox{
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left:10%;
        width: 100px;
        height: 100px;
        transform: translate(-50%,10%);
        margin-top: 50px;
        background: #03A9F4;
        border-radius: 10px;
    }
    #container > #checkbox:before{
        background: #fff;
        content: "";
        width: 30px;
        height: 5px;
        position: absolute;
        top: 60%;
        left: 18%;
        transform: rotate(45deg);
    }
    #container > #checkbox:after{
        background: #fff;
        content: "";
        width: 5px;
        height: 60px;
        position: absolute;
        top: 20%;
        transform: rotate(45deg);
        left: 60%;
    }

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React</title>
</head>
<style>
    body {
        margin-left: 50px;
    }

    /*以下样式的结合设置成文件选择框*/
    #container > #add {
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left: 10%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, 10%);
    }

    #container > #add:before {
        background: #ddd;
        content: "";
        width: 100px;
        height: 5px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

    #container > #add:after {
        background: #ddd;
        content: "";
        width: 5px;
        height: 100px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

    /*以下样式的结合设置单选框*/
    #container > #radio {
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left: 10%;
        width: 100px;
        height: 100px;
        transform: translate(-50%, 10%);
        margin-top: 50px;
        background: #03A9F4;
        border-radius: 50%;
    }

    #container > #radio:before {
        background: #fff;
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    /*以下样式的结合设置多选框*/
    #container > #checkbox {
        border: 1px solid #ddd;
        position: relative;
        top: 50%;
        left: 10%;
        width: 100px;
        height: 100px;
        transform: translate(-50%, 10%);
        margin-top: 50px;
        background: #03A9F4;
        border-radius: 10px;
    }

    #container > #checkbox:before {
        background: #fff;
        content: "";
        width: 30px;
        height: 5px;
        position: absolute;
        top: 60%;
        left: 18%;
        transform: rotate(45deg);
    }

    #container > #checkbox:after {
        background: #fff;
        content: "";
        width: 5px;
        height: 60px;
        position: absolute;
        top: 20%;
        transform: rotate(45deg);
        left: 60%;
    }

    p {
        padding: 30px 0;
    }
</style>
<body>
<div id="container">
    <p>图片选择框如下：</p>
    <div id="add"></div>
    <p>单选框如下：</p>
    <div id="radio"></div>
    <p>多选框如下：</p>
    <div id="checkbox"></div>
</div>
</body>
</html>

杏子姐_1024

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用 before 和 after 实现图片选择框，单选框和多选框

使用 before 和 after 实现图片选择框，单选框和多选框前言图片选择框样式单选框样式多选框样式完整代码如下前言在前端应用中，原生的图片选择框，单选框和多选框样式比较单一。如下图所示：那么如果想要实现比较丰富的选择框样式，应该如何去复写样式昵，本文通过伪元素 :before 和 :after 实现各种好看的选择框。如下图所示：图片选择框样式 /*以下样式的结合设置成...
复制链接

扫一扫

专栏目录