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. 使用spring-loaded开源项目,实现java程序和web应用的热部署

    JDK1.5之后提供了java.lang.instrument.Instrumentation,即java agent机制可以实现类的redefinition和retransform. redefin ...

  2. 怎样安装Windows7操作系统

     1. 打开电脑,插入Windows7安装光盘. 2. 又一次启动电脑: 3. 依据提示按下对应的键.进入选择启动项菜单选择光驱引导.在"Boot Menu"界面按键盘上下键选 ...

  3. DDR3内存技术原理

    随着AMD AM2平台CPU的上市,目前两大处理器巨头均提供了对DDR2内存的支持.不过,DDR2远不是内存技术发展的终点,CPU和内存厂商已经在着手进行DDR3内存的相应准备.DDR2内存的好日子还 ...

  4. netsh http的使用

    1.首先通过cmd进入 C:\Windows\System32\inetsrv>netshnetsh>http netsh http> 退出的时候,使用exit命令 2.显示监听的i ...

  5. 360动态加载的Android插件框架

    github地址:https://github.com/Qihoo360/DroidPlugin DroidPlugin 是360手机助手在Android系统上实现了一种新的插件机制:它可以在无需安装 ...

  6. 罗列几个Android插件化开发框架

    携程插件化框架 ACDD插件化框架 360插件化框架 Android-Plugin-Framework DL APK动态加载框架 部分框架对比 DynamicLoadApk 迁移成本很重:需要使用『t ...

  7. 《Android编程权威指南》CriminalIntent项目梳理

    相信很多新手或者初级开发人员都已经买了第2版的<Android编程权威指南>, 这本书基于Android Studio开发,对入门人员来说是很好的选择,但是很可惜的是, 在完成一个项目后, ...

  8. VS初始化设置

    来源于网上整理和 书<aps.net mvc企业级实战>中. 1.vs模版 版权注释信息 1.我的电脑上VS2015安装在D盘中,所以找的目录为:D:\Program Files (x86 ...

  9. Innodb锁的类型

    Innodb锁的类型 行锁(record lock) 行锁总是对索引上锁,如果某个表没有定义索引,mysql就会使用默认创建的聚集索引,行锁有S锁和X锁两种类型. 共享锁和排它锁 Innodb锁有两种 ...

  10. 【转】Flash AS3.0 中的自定义事件

    原文 http://www.cnblogs.com/acpp/archive/2010/10/19/1855670.html package { import flash.events.Event; ...