<span class="choose"><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>

  

.choose {
position: relative;
}
.input_check {
position: absolute;
visibility: hidden;
}
.input_check+label {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #c00;
cursor: pointer;
}
.input_check:checked+label:after {
content: "";
position: absolute;
left: 2px;
bottom: 12px;
width: 9px;
height: 4px;
border: 2px solid #e92333;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
}

  js:获取到input的checked的状态

$('.input_check').click(function(){
console.log($(this).prop('checked'))
})

  

html中checkbox自定义样式(css版本)的更多相关文章

  1. android中checkbox自定义样式

    1.首先res/drawable中定义checkbox_style.xml样式: <?xml version="1.0" encoding="utf-8" ...

  2. xamarin android checkbox自定义样式

    xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...

  3. Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由Route&Navigation

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  4. node中console自定义样式

    最近公司的项目一直使用gulpfile打包,项目会有三种项目打包(生产环境)和监听(开发环境)两种过程,同时需要清除文件夹,希望打包时增加提示以便区分,暂时分为上述三种提示打包.监听.清除. 先上co ...

  5. WPF CheckBox 自定义样式

    WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...

  6. ModernUI教程:如何从MUI样式中派生自定义样式

    下面的步骤用来说明怎么样去创建一个基于MUI的自定义样式.让我们创建一个字体颜色显示为红色的按钮样式. 可视化显示如下: 因为我们并没有明确生命继承自MUI风格,它还是采用WPF的默认风格.我们需要设 ...

  7. CheckBox自定义样式

    效果: xmal代码: <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> & ...

  8. CSS3 radio 或checkbox 自定义 样式

    .style-radio {position:relative;width:15px;height:15px;outline:none;} .style-radio:after {position:a ...

  9. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

随机推荐

  1. select框动态添加选项

    $.ajax({ url : "${staticServer }/ywgl/zkpzgl/zkfkgl/showBillType.htm", //ajax请求路径 type : & ...

  2. Jmeter之乱码 (三)

    使用Jmeter执行JDBC请求,往MySQL数据库中插入数据,如下图: 执行结果如下: 解决方案: 在JDBC Connection Configuration中的Database URL后加上&a ...

  3. Web04_JavaScript

    String对象 match()找到一个或多个正则表达式的匹配 substr()从起始索引号提取字符串中指定数目的字符 substring()提取字符串中两个指定的索引号之间的字符 <!DOCT ...

  4. beego框架学习(二) -路由设置

    路由设置 什么是路由设置呢?前面介绍的 MVC 结构执行时,介绍过 beego 存在三种方式的路由:固定路由.正则路由.自动路由,接下来详细的讲解如何使用这三种路由. 基础路由 从beego1.2版本 ...

  5. 【ABAP系列】SAP ABAP获取域(domain)值的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP获取域(doma ...

  6. [开发技巧]·TopN指标计算方法

    [开发技巧]·TopN指标计算方法 ​ 1.概念介绍 在图片分类的中经常可以看到Top-1,Top-5等TopN准确率(或者时错误率). 那这个TopN是什么意思呢?首先Top-1准确率最好理解,就是 ...

  7. GCC+Make 自动生成 Makefile 依赖

    目录 BASIS wildcard .PHONY 静态模式 常用自动变量 自动生成依赖(GCC) -M 参数 编写 Makefile Makefile 细节说明 其他 本文内容基于 GNU MAKE. ...

  8. 利用Ansible模块copy和fetch进行主机间文件的传递

    场景: java应用程序和Ansible不在同一台机子,要读取的文件又在另一台主机. 主机a不能保存文件,可以临时保存. 文件都在主机b上保存. 需求: 需要将文件从主机c传到主机b,再从主机b传到主 ...

  9. nginx配置本地域名反向代理实现本地多域名80访问

    什么是反向代理? 代理:通过客户机的配置,实现让一台服务器代理客户机,客户的所有请求都交给代理服务器处理. 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器. ...

  10. Maven 相关功能介绍

    一: Maven环境隔离