HTML：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <div class="container">

        <div>
            <label>
                <input type="checkbox" name="1">
                <span>Somnambulist</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Epoch</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Ineffable</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Hiraeth</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Petrichor</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Mellifluous</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Serendipity</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Sonorous</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Aquiver</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Limerence</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Bombinate</span>
            </label>
        </div>

        <div>
            <label>
                <input type="checkbox" name="">
                <span>Ethereal</span>
            </label>
        </div>

    </div>

</body>

</html>

CSS：

body {
    margin:;
    padding:;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.container div {
    margin: 10px;
}

.container div label {
    cursor: pointer;
}

.container div label input[type='checkbox'] {
    display: none;
}

.container div label span {
    position: relative;
    display: inline-block;
    background: #424242;
    padding: 15px 30px;
    color: #555;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    font-size: 20px;
    border-radius: 30px;
    transition: 0.5s;
    user-select: none;
    overflow: hidden;
}

.container div label span::before {
    content: "";
    position: absolute;
    top:;
    left:;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, .1)
}

.container div:nth-child(4n + 1) label input[type='checkbox']:checked ~ span {
    background: #00a8ff;
    color:#fff;
    box-shadow: 0 2px 30px #00a8ff;
}
.container div:nth-child(4n + 2) label input[type='checkbox']:checked ~ span {
    background: #9c88ff;
    color:#fff;
    box-shadow: 0 2px 30px #9c88ff;
}
.container div:nth-child(4n + 3) label input[type='checkbox']:checked ~ span {
    background: #fbc531;
    color:#fff;
    box-shadow: 0 2px 30px #fbc531;
}
.container div:nth-child(4n + 4) label input[type='checkbox']:checked ~ span {
    background: #4cd137;
    color:#fff;
    box-shadow: 0 2px 30px #4cd137;
}

效果图：

CSS效果：checkbox点选效果的更多相关文章

  1. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  2. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  5. 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

    最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...

  6. checkbox 全选效果

    html部分 <p id="all">全选</p> <input type="checkbox" /><br/> ...

  7. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  8. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  9. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

随机推荐

  1. git上传

    #1.Git 全局设置: git config --global user.name "skbarcode" git config --global user.email &quo ...

  2. JS中for循环变量作用域

    http://www.cnblogs.com/zhus/p/6513741.html  博主写得很好

  3. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  4. RabbitMQ安装笔记

    前言 项目中某些场景考虑到高并发情况,调研后决定使用RabbitMQ,本来以为很简单,没想到配置环境花费了好多时间,按照网上的方法来,总是有其他问题需要继续查找,特记录此笔记,方便下次部署安装. 本笔 ...

  5. JS 超类和子类

    此篇由别的大神的博客与<javascript高级程序设计>一书整理而来 原博客地址:https://hyj1254.iteye.com/blog/628555 看到javascript高级 ...

  6. thymeleaf下拉框从后台动态获取集合数据并回显选中

    今天遇到从后台集合中取出对象在前台页面下拉列表展示: <select name="signature" lay-search="" class=" ...

  7. this应用详解-js原生

    学习记录,以防遗忘,适合新手解惑.老鸟避让! 在微信H5的开发中,很多页面都是简单的一个模型item在加上很多很多数据组成起来的.例如微信朋友圈,仔细观察,他的一个基本模型就是 “头像图片 + 用户昵 ...

  8. echarts 去掉 x轴坐标

    symbol:'none', //这句就是去掉点的 smooth:true,

  9. springboot based 主从数据源中间件方案

    先定几个原则/目标: 原则: 1.必须保证数据逻辑的一致性: 反例:刚写了数据,(因为主从延迟)查询不到: 2.对开发人员透明,对业务代码无侵入性:与单数据源的业务代码调用一致: 反例:对已有业务代码 ...

  10. 常见类 Object

    1.在Java类继承结构中Java.lang.Object类位于顶端 2.如果定义一个Object类没有使用extends关键字声明其父类,则其父类为Java.lang.Object类 3.Objec ...