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 ...
随机推荐
- CentOS 7下安装GUI图形界面
https://www.linuxidc.com/Linux/2017-03/141465.htm
- 因为没有安装xcode，得不到xcode证书报错
新接的一个项目.在从gitlab上clone代码的时候报错: Agreeing to the Xcode/iOS license requires admin privileges, please r ...
- MySQL数据库（2）
上一篇我们讲述过MySQL创建数据库,数据表的内容,其中涉及到了几个约束: NOT NULL 非空约束 PRIMARY KEY 主键约束 UNIQUE KEY 唯一约束 其实还有两个约束 ...
- Android 开发第一项目——计算器的开发记录
2017.4.1 今天布局界面基本完成,现在写了一点事件绑定.计划是多用动态绑定,随时用随时改.关于布局方面,昨天弄到很晚,原因是Layout使用错误,用的自带的,没仔细看,预览的时候没有问题但是真机 ...
- 生成SQL Server数据字典
1.表信息 Select * FROM INFORMATION_SCHEMA.COLUMNS order by Table_name; select * from INFORMATION_SCHEMA ...
- python - 初识面向对象
1.初识面向对象 面向过程:一切以事务的发展流程为中心 优点:负责的问题流程化,编写相对简单 缺点:可扩展性差,只能解决一个问题,改造也会很困难,牵一发 ...
- 跟随我在oracle学习php（17）
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- springboot学习小记
思维导图:https://www.edrawsoft.cn/viewer/public/s/72a06689197636 1.springboot是一个快速整合第三方框架,简化XML配置完全采用注解化 ...
- 一个通过GINA拦截 盗窃登陆口令的病毒分析
病毒行为: 1\将资源中的DLL释放到当前目录下 2\设置注册表,将GINA DLL设置为上一步中释放的DLL DLL行为: 1\在DLL被进程装载时, 装载正常的msgina.dll, 并保存句柄, ...
- VMProtect1.63分析
教材上给出了一些说明,虽然是断断续续的.. ..之后通过单步,把断的地方都连起来了,也明白了VMP分析插件究竟做了些什么.. //表1,表2在最后. 加密之前的代码: INC ECX C3 RETN ...