美化checkbox多选框
看到那些UI框架都是有美化checkbox多选框的,不过大多是图片或者是字体图标。于是就利用label仿了个多选框效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
p{
width: 20px;
height: 20px;
padding: 3px;
margin-left: 50px;
background-color: #88d;
opacity: .6;
border: 1px solid #333;
}
label{
position: relative;
display: block;
width: 100%;
height: 100%;
}
label:after{
position: absolute;
top: 5px;
left: 4px;
content: '';
display: block;
width: 10px;
height: 6px;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(-45deg)
} input:checked + label{
opacity: 0;
}
</style>
</head>
<body>
<p>
<input type="checkbox" id="all" name="">
<label for="all"></label>
</p>
</body>
</html>
美化checkbox多选框的更多相关文章
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- php怎么获取checkbox复选框的内容?
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
随机推荐
- Android-Java卖票案例-推荐此方式Runnable
上一篇博客 Android-卖票案例static-不推荐此方式,讲解了卖票案例是 private static int ticket = 10;,static静态的这种方式来解决卖票多卖30张的问题, ...
- JavaLogin小框架制作【精品博客】
做一个小登录接口方法,让用户传入用户名,密码,就可以知道登录的结果信息,并以接口监听的方式控制. 先看客户端执行效果: 输入正确: 输入错误: 模拟客户端使用登录小框架: package com.de ...
- Abp mvc angular 添加视图
在LawAndRegulation项目中添加导航路由(Abp添加菜单)对应的客户端页面. 创建文件 客户端页面在Abp模板项目中默认存放在Abp/Main/views文件夹下,在项目中我们创建属于字典 ...
- 解决EF没有生成字段和表说明
找了很多资料,终于找到一篇真正能解决ef生成字段说明,注释的文章,收藏不了,于是转载 本文章为转载,原文地址 项目中使用了EF框架,使用的是Database-First方式,因为数据库已经存在,所以采 ...
- Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad
Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad 方法一:安装单独组件 ...
- c#使用NPOI快速导出到Excel
接上篇博文<C#快速导出到excel>:由于此种方法不能导出成.xlsx格式,为解决此问题,本次分享使用NPOI. 参考:https://www.cnblogs.com/lazyneal/ ...
- WorkSpace
--往GridControl中添加绑定数据 // 房间费用 DataTable dtRoomInfo = new DataTable(); dtRoomInfo.Columns.Add("v ...
- 【2019】OCP 12c 062题库更新大量新题-7
7.daily_ords_lst is created in locally managed tablespace ORDERS_TBS which uses automatic segment sp ...
- 系统可能不会保存你所做的修改 onbeforeunload
网上找了好多实现这个的方法,说的还是不明白.害得我(我自己的原因)以为是需要在服务器环境下才能跑通 window.onbeforeunload; 后来猜想是不是函数返回值发生变化就会触发. <! ...
- webpack快速入门——实战技巧:webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...