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.新建类库 ...
随机推荐
- Android Weekly Notes Issue #248
Android Weekly Issue #248 March 5th, 2017 Android Weekly Issue #248. 本期内容包括: 为什么有时候应该让你的应用崩溃(而不是一味保护 ...
- jQuery遮罩插件 jquery.blockUI.js
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...
- fastlane安装流程和fastlane match同步证书和PP文件方法
分步指南 安装fastlane: ① Make sure you have the latest version of the Xcode command line tools installed: ...
- Tcl与Design Compiler （六）——基本的时序路径约束
本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 时序约束可以很复杂,这 ...
- javaWEB与cookie
Cookie1. Http协议与Cookie(了解) * Cookie是HTTP协议制定的!先由服务器保存Cookie到浏览器,再下次浏览器请求服务器时把上一次请求得到Cookie再归还给服务器 ...
- Luogu1486郁闷的出纳员【Splay】
P1486 郁闷的出纳员 题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反 ...
- 测试开发Python培训：抓取新浪微博抓取数据-技术篇
测试开发Python培训:抓取新浪微博抓取数据-技术篇 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的se ...
- iOS 文件下载和打开
最近的项目要用到一个在线报告的下载,于是完成后自己在理一下思路,大体的实现了我要得需求. 话不多说,直接上代码 首先,取到网络文件的链接,进行判段是否需求再次下载还是直接打开 #pragma mark ...
- Win10《芒果TV》商店版更新v3.4.0：率先支持创意者画中画，工作娱乐两不误
在Win10创新者更新中,微软为Windows10 PC系统添加了UWP应用窗口置顶功能(亦称画中画功能),Win10版<芒果TV>更新v3.4.0,率先宣布支持画中画新特性,为广大用户带 ...
- HTML基础学习(二)—CSS
一.CSS概述 CSS(Cascading Stytle Sheets)层叠样式表,用来定义网页的显示效果.可以解决HTNL代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显 ...