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# WPF开发之MVVM模式开发
MVVM模式由Model,View,ViewModel三部分组成. Model需继承INotifyPropertyChange(属性修改通知) ViewModel负责业务逻辑,连接View和Model ...
- word中一页中添加两种不同的页码
,在文档编写的过程中,可能一个页面需要编写两个不同的页码,举个例子,在页脚有一个页码是整个文档的页码,页眉有一个页码,是每个章节的页码: 设置如下: 此处选中这个图标是为了能够看到分节符和其他的符号 ...
- tensorflow lite的demo在android studio上环境搭建
由于很久没有接触过Android开发,而且最早用的是eclipse,所以这个demo在android studio上的搭建过程,真的是踩了不少坑.记录这篇文章,纯粹是给自己一点收获. 环境搭建的过程, ...
- 记录Datagrid使用的一些事项
1.将两个列的文本拼接到一起并显示,如列1为name,列2为code,需要显示name(code).如:小明(123) 则初始化datagrid时在columns[]里加入:列1添加formatter ...
- node.js安装express模块应用服务框架
1.创建工程文件夹case-04 2.在终端窗口进入文件夹目录,并输入:npm init,并一路回车,最后看到在case-04文件夹里自动生成了package.json 文件 3.打开vscode,进 ...
- idea中文乱码
- jq鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1)click单击鼠标事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').cl ...
- View事件体系
View事件体系 文章目录 View事件体系 一.Android View基础知识 1.1 View简介 1.2 View分类 1.3 View的结构 1.4 View的坐标 1.4.1 Androi ...
- 网络编程-day3
---恢复内容开始--- 一.缓冲区: 将程序和网络解耦 输入缓冲区 输出缓冲区 每个 socket 被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区. write()/send() 并不立即向 ...
- win10系统开机输入密码黑屏解决方法
方法一: 第一步:首先打开笔记本电脑开机,输入开机密码进入 第二步:输入密码后显示黑屏,按"Ctrl+Alt+Del"组合键打开任务管理器 第三步:在打开的任务管理器中,点击&qu ...