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

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

原创最新推荐文章于 2023-11-15 08:30:23 发布 · 628 阅读

2 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用CSS伪元素:before和:after来定制图片选择框、单选框和多选框的样式，使前端应用中的选择框更加美观和个性化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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>