CSS效果：checkbox点选效果
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点选效果的更多相关文章
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- checkbox 全选效果
html部分 <p id="all">全选</p> <input type="checkbox" /><br/> ...
- 纯CSS修改checkbox复选框样式
借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
- 纯CSS修改checkbox复选框样式-02
我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...
随机推荐
- 干货 | 揭秘如何增加listing多个类目节点
流量是电商销售的必要因素,可以说,任何成功的电商平台都离不开流量.亚马逊listing优化做得好,不仅能提高产品的曝光率,还能提升转换率,而好的类目可以吸引大的流量.帮你快速爬升. 首先我们来了解一下 ...
- SpringBoot使用日志
1.日志框架 日志门面 日志实现 JCL.SLF4J.jboss-logging Log4j.JUL.Log4j2.Logback 日志门面:SLF4J 日志实现:Logback SpringBoot ...
- 【JAVA】servlet执行流程
servlet执行流程 客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将request.respon ...
- 多条件分类统计group by 显示数目为0的类别
CREATE TABLE #authorTable(author VARCHAR(50)) INSERT #authorTable SELECT 'peter' UNION SELECT '捌妮' U ...
- 继续mysql8navicat12连接登录的异常
今天登录使用navicat登录连接本地mysql,一直提示Navicat Premium 12连接MySQL数据库出现Authentication plugin 'caching_sha2_passw ...
- Spring教程笔记（3） Bean
Bean配置项 id class必须项 如果根据id来获取bean,要写id:如果根据类型来配置bean,只写class就可以. scope作用域 constructor arguments prop ...
- call apply bind的区别
都是天生自带的内置方法(Function.prototype),所有的函数都可以调取这三个方法,改变this指向 call 语法:fn.call(context,para1......) 把fn方法执 ...
- python -- 小数据池 is和 == 再谈编码
1.小数据池 python程序是由代码块构成的,一个代码块的文本作为python程序的执行单元. 代码块:一个模块,一个函数,一个类,甚至一个command命令都是一个代码块,一个文件也是一个代码块, ...
- oracle中“ORA-00060: 等待资源时检测到死锁” 或存储过程编译卡死 解决方法
之前在调试存储过程时,出现卡死情况,无法插入数据 解决方法 1.查看那些表被锁住: --1.查看那些表被锁住--- select b.owner,b.object_name,a.session_id, ...
- 网页布局中页面内容不足一屏时页脚footer固定底部
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...