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 ...
随机推荐
- rsyslog+loganalyzer配置
1.loganalyzer服务器搭建[root@localhost ~]# getenforce #查看selinux是否关闭[root@localhost ~]# setenforce 0 #临时关 ...
- vue版 弹幕
效果: 下载 优化版下载: https://pan.baidu.com/s/1mvKGwJsBjXd2hvvi5Rp9pA 用法: import barrage from '../components ...
- ArcSDE10.1配置Oracle 监听器来使用SQL操作ST_Geometry(个人改动版)
发了两天的时间来解决配置Oracle 监听器来使用SQL操作ST_Geometry的配置,网上搜索一大片,结果真正找到的只有方法可用,下面把这个方法我个人在总结下. ArcSDE10.1配置Oracl ...
- 关于CC的完全非线性椭圆方程一书的一些小结
CC的整本书主要是想要研究在粘性解的框架下的一致椭圆方程解的正则性.我们试着一章一章来解析他. 序言部分也是值得每一个字细读的,主要讲述了他们的工作的主要内容,即在粘性解的框架下研究解的正则性,需要特 ...
- C++ DWORD 转byte char 数组、指针
C++ DWORD 转byte char 数组.指针 byte byteData[1024]; // byte数组,示例 DWORD dwData = dwReadBytes; // dword数据, ...
- javascript高级程序设计第3版——第1Java章 DOM扩展
虽然DOM 为与XML 及HTML 文档交互制定了一系列核心API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实 ...
- url路由配置以及渲染方式
路由分配及模板渲染 路由系统 urlpatterns = [ path('admin/', admin.site.urls), path('teacher/',include('teacher.url ...
- XJ模拟noip赛1
什么都不说—— 成功打出 G-G!
- .NET controller传给view的bool类型
问题: 在view中访问该变量是False,不是字符串,也不是bool类型的false. 解决方法: controller: ViewBag.Test = false; view中得到false值: ...
- 《Python量化交易教程》第一部分新手入门 第1天：谁来给我讲讲Python？
一.量化投资视频学习课程 二.Python手把手教学 第1天:谁来给我讲讲Python? PS: 1.注意使用方法,这个以后都有大用 2.注意符号的使用方式 3.尽量用英文表达 4.本日学习内容以及其 ...