css 设置 checkbox复选框控件的对勾√样式
效果
最终的样式，想要的效果:
案例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>选中标签forcheck</title>
</head> <body>
<div class="div-checked">
<label>
<input type="checkbox" value="cbEticket">
<i>电子票</i><span></span>
</label>
<label>
<input type="checkbox" checked="" value="cbMeetingRemind">
<i>会议提醒</i><span></span>
</label>
</div>
</body> </html>
页面结构
.div-checked label {
cursor: pointer;
position: relative;
display: inline-block;
width: 150px;
height: 38px;
border: 1px solid grey;
}
/**
* 按钮透明
* @type {String}
*/
input[type="checkbox"] {
opacity: 0;
}
/**
* checkbox选中样式
* @type {String}
*/
input[type="checkbox"]:checked+i {
border-color: blue;
color: blue;
}
/**
* i标签的大小
*/
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
/**
* 对勾√效果，使用border
* @type {[type]}
*/
span:after {
opacity: 1;
content: '';
position: absolute;
width: 5px;
height: 15px;
background: transparent;
top: 10px;
right: 5px;
border: 2px solid #fff;
border-top: none;
border-left: none;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
/**
* 选中状态，span(三角形)样式
* @type {String}
*/
input[type="checkbox"]:checked+i+span {
width: 0px;
height: 0px;
border-color: blue transparent;
border-width: 0px 0px 30px 30px;
border-style: solid;
position: absolute;
right: -1px;
top: 10px;
opacity: 1;
}
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 ...
- CheckBox复选框控件
CheckBox复选框控件 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2 ...
- Android控件之CheckBox(复选框控件)
一.有两种状态: 选中状态(true).未选中状态(false) 二.属性 android:id = "@+id/checkbox" android:layout_width=&q ...
- Java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节. 思路如下: 创建JPanel面板对象: 使用JPane ...
- 纯CSS修改checkbox复选框样式
借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- Asp.net自定义单选复选框控件
将常用的jquery插件封装成控件也是个不错的选择 下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript 1.新建类库 ...
随机推荐
- Burpsuite暴力破解
神器:burpsuite 闲话不多说,直接开搞 1.打开文件BurpLoader.jar,进入Proxy--Options,启用代理 2.打开浏览器(IE),进入Internet选项-连接-局域网设置 ...
- 使用Nginx+CppCMS构建高效Web应用服务器（之二）
使用Nginx+CppCMS构建高效Web应用服务器(之二) 上一篇 使用Nginx+CppCMS构建高效Web应用服务器(之一) 大致介绍了网站的整体架构,实际上通过调用REST获取数据并没有实现. ...
- cstring头文件函数解析
原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5643829.html 在使用由字符数组或指针组成的字符串的时候,要用到一些函数,这些函数通常包含在 ...
- Ubuntu14.04上安装openGL
安装命令:sudo apt-get install build-essential sudo apt-get install libgl1-mesa-dev sudo apt-get install ...
- Python快速入门（2）
var = raw_input() 获取用户输入,该函数会将获取的值转化为一个字符串,因此有时需要强制类型转换. if-elif-else: 三元操作符:condition1 if exp else ...
- python 附加作业01
题目1: 画方块 输入样例: 10 a 输出样例: 代码: N=eval(input()) c=input() for i in range(N): for j in range(N): print( ...
- 数字千分位处理，number.js，js保留两位，整数强制保留两位小数
杨龙飞 杨龙飞 杨龙飞 杨龙飞 杨龙飞 杨龙飞 官方文档:https://www.customd.com/articles/14/jquery-number-format-redux 1.千分位 $. ...
- Django后台设置--遇到的问题与解决方案
1. 后台如何管理项目中的models 新建的Django工程会自动引用admin 应用,新建后台可以通过 createsuperuser 命令建立后台admin超级管理员,我遇到的第一个问题,就是如 ...
- （转）POPTEST联合创始人李爱然的“IT培训创业的随想"
IT教育行业最大的问题是缺少像互联网行业一样的产品经理. 大多数IT教育机构在早期依靠个人或者一套课程开创了一定的局面,随着机构的壮大,机构把市场营销提到至高点,销售至上,而把产品(培训产品)放在后面 ...
- SpringBoot-SpringMvc的Interceptor拦截器配置
Interceptor拦截器实现对每一个用户请求处理前后的业务处理,比如我们需要对用户请求进行响应时间的记录,需要记录请求从开始到结束所耗的时间,这时我们就需要用到拦截器了 下面我们以记录请求处理时间 ...