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 ...
随机推荐
- C# interface 的隐式与显示实现及适应范围源码演示
把代码过程中经常用到的一些代码段做个记录,如下的资料是关于C# interface 的隐式与显示实现及适应范围演示的代码. interface IAnimal { void Dog(); } clas ...
- 深入了解UML类图
深入浅出UML类图 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the ...
- spring RedisTemplate的使用(一)--xml配置或JavaConfig配置
1.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="h ...
- mysql5.7版本yum安装---redhat7.0
1.官网下载yum包 [root@test01 test]# wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch ...
- 推荐一个好用的E2E前端测试框架cypress
Cypress 是一个E2E的前端自动化测试框架,同样是基于BDD的思想设计的,话不多说,上demo https://github.com/Spillage/cypress-demo PS, 还有一个 ...
- OneNote无法打开链接出现错误：你的组织策略阻止我们为你完成此操作
首先打开注册表编辑器,按键盘win+r,调出运行窗口,输入regedit打开注册表编辑器 打开HKEY_CURRENT_USER\Software 打开\Classes 最后选中.html,在默认选项 ...
- jsp的page、request、session、application四个作用域的作用
1.page作用域也是最小的作用域,它只能在当前页面中使用. 2.request作用域主要是发送请求,但只能在两个页面之间发送一次请求. 3.session作用域是一个会话,也就是一个浏览器,意思是说 ...
- 有效的括号序列——算法面试刷题4（for google），考察stack
给定一个字符串所表示的括号序列,包含以下字符: '(', ')', '{', '}', '[' and ']', 判定是否是有效的括号序列. 括号必须依照 "()" 顺序表示, & ...
- Charles在Mac、iPhone、Android上抓http/https协议的包
1.我使用的版本是4.0.2,下载和破解网上方法很多,不做说明 2.Charles在Mac上抓http/https协议的包 2.1先把这三个都给装上,装完后会自动跳转到钥匙串中 2.2如果装完后提示证 ...
- 考研计算机复试（广东工业大学C语言复试2018笔试题）（精华题选）
1.obj文件是:(二进制文件) 2.函数func(float x){printf("%f",x+x);}的类型是() A.void B.int类型 C.无法确定 3.若有定义:i ...