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. Redis封装之List

    /// <summary> /// Redis list的实现为一个双向链表,即可以支持反向查找和遍历,更方便操作,不过带来了部分额外的内存开销, /// Redis内部的很多实现,包括发 ...

  2. POJ 3626 BFS

    思路:easy BFS //By SiriusRen #include <queue> #include <cstdio> #include <algorithm> ...

  3. PullToRefreshListView中嵌套ViewPager滑动冲突的解决

    PullToRefreshListView中嵌套ViewPager滑动冲突的解决 最近恰好遇到PullToRefreshListView中需要嵌套ViewPager的情况,ViewPager 作为头部 ...

  4. Android控件-ViewPager(仿微信引导界面)

    什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v ...

  5. [ Java ] [ Eclipse ] 导出/导入Eclipse的workspace配置(备份Eclipse配置)

    Export *.epf 文件 原文連結: http://www.cnblogs.com/52php/p/5677647.html

  6. Object和其他类型的转换

    Object对象是一切类的父类(基类),只要是Object对象,可以强制转换为其他类型.

  7. 开源系统源码分析(filter.class.php)

    <?php class baseValidater { //最大参数个数 const MAX_ARGS=3; public static function checkBool($var) { r ...

  8. angularjs之手机输入法回车变搜索,并触发事件,兼容pc回车事件

    一.效果:回车按钮变搜索 之前的输入法: 之后的输入法: 二.功能实现 <input type="search" id="search_input" pl ...

  9. 多个ComboBox绑定同一个数据源出现的问题解决办法

    出现问题: 当多个ComboBox绑定同一个数据源后,只要更改其中一个的选择项时,其它的ComboBox也跟着改变了 解决办法: DataTable dt = new DataTable(); dt ...

  10. ArcGIS Engine中添加点、线、面元素

    转自原文 ArcGIS Engine中添加点.线.面元素 此种方式为IElement的方式在axMapControl的GraphicsContainer中好绘制图形. //画点 IPoint pt = ...