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"]样式的更多相关文章

  1. 关于input 的选中,自定义input[type="checkbox"]样式

    1.css 呈现   选中后 的input的样式可以用 /*背景图*/      background:url('../pc/images/archives/icon_choosed.png') no ...

  2. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  3. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  4. 原生javascript自定义input[type=checkbox]效果

    2018年6月27日  更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...

  5. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  7. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  8. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  9. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

随机推荐

  1. iOS 一个ViewController上显示2个tableView的方法

    1.在StoryBoard上创建2个tableView,并用autolayout约束. 2.在ViewController上拖进来. @property (weak, nonatomic) IBOut ...

  2. vue2.0-transition动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. webpack03

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. BZOJ1685: [Usaco2005 Oct]Allowance 津贴

    [传送门:BZOJ1685] 简要题意: 贝西工作勤勤恳恳,她每月向约翰索要C 元钱作为工资.约翰手上有不少钱,他一共有N 种面 额的钞票.第i 种钞票的面额记作Vi,约翰有Ki 张.钞票的面额设定是 ...

  5. 学习 shell —— 编写基本脚本

    set:查看环境变量: 0. 简单说明 一般而言,shell 会通过 PATH 变量来查找命令,如果要执行用户编写的脚本(未添加进 PATH 路径),还需两步操作: 需要 $ ./xx 为需执行该脚本 ...

  6. BZOJ 3262 cdq分治 OR 树套树

    注意判断 三个条件都一样的-- (CDQ分治 其实并不是很难理解 只是想不到--) CDQ分治: //By SiriusRen #include <cstdio> #include < ...

  7. 分享一下vue ui的分页的用法

    var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.c ...

  8. js实现导出数据到excel

    来自:http://www.imooc.com/article/13374 //html代码<!DOCTYPE HTML> <html> <head> <ti ...

  9. UTC时间 GMT时间 本地时间 北京时间 时区 夏令时简要说明

    1.UTC时间 与 GMT时间 整个地球分为二十四时区,每个时区都有自己的本地时间.为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated). ...

  10. docker升级&加速器配置

    默认使用yum或者apt安装的docker版本较老,可以通过以下方式进行升级: 1.卸载旧版本 [root@CentOS702 ~]# centos 7.3卸载docker[root@CentOS70 ...