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. 简单日志LogHelper

    public static class LogHelper { //日志存储路径 private static string LogPath = Path.Combine(AppDomain.Curr ...

  2. 【实用篇】Android之应用程序实现自动更新功能

    我个人用的是友盟提供的自动更新组件,因此在这里只描述如何实用友盟提供的组件来完成程序的自动更新,步骤如下: 1.登录友盟官网,点击注册一个友盟账号. 2.注册成功后将会自动进入到添加新应用界面,选择添 ...

  3. tensorflow学习之路-----MNIST数据

    ''' 神经网络的过程:1.准备相应的数据库 2.定义输入成 3.定义输出层 4.定义隐藏层 5.训练(根据误差进行训练) 6.对结果进行精确度评估 ''' import tensorflow as ...

  4. CentOS下部署巡风步骤详解

    本博客已经迁移到新的网站,www.je2se.com,请大家移步关注,互相交流,共同成长 巡风Centos 6.5部署指南 基础环境要求: Python2.7+ 安装Centos相关依赖 # Cent ...

  5. Android性能优化之提高ListView性能的技巧

    ListView优化一直是一个老生常谈的问题.无论是面试还是寻常的开发中,ListView永远不会被忽略掉,那么这篇文章我们来看看怎样最大化的优化ListView的性能. 1.在adapter中的ge ...

  6. 出乎意料的else语句

    在python中你可能时不时不碰到else语句用在while和for循环中,请不要吃惊,先看看它的作用吧! 实际上在循环语句中,else子句仅仅会在循环完毕后运行.即跳出循环的操作.如break,同一 ...

  7. 说说第二次配置Ubuntu14.04

    任务下达.要装几台linux电脑.并配置能远程--事实上一開始我是拒绝的,内心里百般不想去做.由于干过一次.知道这活儿非常麻烦,这次又有新需求.技术上有非常多还不会.须要花费时间查资料.当时大概预计了 ...

  8. js--09定时器

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 3.Maven之(三)Maven插件

    转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...

  10. jq---方法总结

    1. 什么是jQuery 在使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它). jQuery是一个非常流行的快速.小巧.功能强大的开源JavaScript库. ...