自定义input[type="checkbox"]样式
input[type=checkbox] {
visibility: hidden;
position: relative;
}
input[type=checkbox]:after {
content: "";
display: block;
position: absolute;
width: 18px;
height: 18px;
visibility: visible;
box-sizing: border-box;
border-radius: 18px;
background: #CBCED1;
}
input[type=checkbox]:checked::after{
background: #2882DD;
}
input[type=checkbox]:checked::before {
content: "";
display: block;
position: absolute;
left: 4px;
top: 4px;
width: 10px;
height: 6px;
border: 2px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
visibility: visible;
z-index: 1;
box-sizing: border-box;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
left: 4px;
top: 4px;
width: 10px;
height: 6px;
border: 2px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
visibility: visible;
z-index: 1;
box-sizing: border-box;
}


自定义input[type="checkbox"]样式的更多相关文章
- 关于input 的选中,自定义input[type="checkbox"]样式
1.css 呈现 选中后 的input的样式可以用 /*背景图*/ background:url('../pc/images/archives/icon_choosed.png') no ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- 原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?
总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...
随机推荐
- POJ 1152 An Easy Problem! (取模运算性质)
题目链接:POJ 1152 An Easy Problem! 题意:求一个N进制的数R.保证R能被(N-1)整除时最小的N. 第一反应是暴力.N的大小0到62.发现当中将N进制话成10进制时,数据会溢 ...
- bzoj1066【SCOI2007】蜥蜴
1066: [SCOI2007]蜥蜴 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2512 Solved: 1238 [Submit][Statu ...
- BZOJ3875: [Ahoi2014&Jsoi2014]骑士游戏
[传送门:BZOJ3875] 简要题意: 给出n种怪物,每种怪物都带有三个值,S[i],K[i],R[i],分别表示对他使用普通攻击的花费,使用魔法攻击的花费,对他使用普通攻击后生成的其他怪物. 每种 ...
- css如何实现垂直居中(5种方法)
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- zzulioj--1089--make pair(dfs+模拟)
1809: make pair Time Limit: 1 Sec Memory Limit: 128 MB Submit: 60 Solved: 44 SubmitStatusWeb Board ...
- hdoj--5053--the Sum of Cube(水)
the Sum of Cube Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Tot ...
- POJ 3257 DP
题意: 思路: 用vector存上本出发点能到的地方&成本&有趣指数(用结构体保存) 然后DP就好了 f[i][j]表示到了i 成本为j的有趣指数最大是多少 f[vec[i][k].e ...
- 开源计算机集群监控Ganglia应用视频
Ganglia源于Berkeley发起的一个开源集群监视项目,设计用于监测数上千节点的计算机集群.它包含gmond.gmetad以及一个Web前端.可以用来监控系统处理器 .内存.硬盘 I/O.网络流 ...
- react-native flatlist setState修改数据视图不刷新解决方案
给flatlist添加属性:handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems) ...
- C语言之基本算法39—字符串经典操作
//字符串概念! /* ================================================================== 题目:练习字符串的 1.输入输出 ...