<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. 阶段3 2.Spring_01.Spring框架简介_05.spring的优势

  2. python学习笔记:(十)函数

    python中定义函数使用def关键字,一般格式如下: def 函数名(参数列表): 函数体 如: #无参数 def helloworld(): print("Hello World!&qu ...

  3. Unity3D 打包成Exe文件

    Unity发布后一般都会一个exe文件和_data文件以及UnityPlayer.dll,如果把这三个文件整合成一个exe就可以(装逼)了 首先打开Winrar将这三个压缩: 压缩文件名设置为需要启动 ...

  4. 【github】git常用命令和node项目

    这是之前在本地搞的一个小东西.因为之前电脑经常会很卡.后来发现任务管理器中多了两个不知名的进程:chromgpu.exe和flrefox.exe 乍一看以为和chrome和firefox两个浏览器有关 ...

  5. 【HANA系列】SAP 一位SAP培训顾问的建议:SAP HANA应该如何学习?

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP 一位SAP培训顾问的建议 ...

  6. C++写Socket——TCP篇(0)建立连接及双方传输数据

    满山的红叶--飘落之时-- 最近接触了点关于用C++写socket的东西,这里总结下. 这里主要是关于TCP的,TCP的特点什么的相关介绍在我另一篇博文里,所以这里直接动手吧. 我们先在windows ...

  7. Spring源码阅读环境搭建

    目录 安装gradle 导入Spring源码 创建测试模块my-test 其他问题 spring-aspects模块构建时报错 本文思维导图 本文将粗略的搭建一个Spring源码的阅读环境,为后面的源 ...

  8. 访问DataGridView的Rows报了OutOfIndexRangeException错误

    DataGridView绑定了一个List<Entity>实体集合,在遍历DataGridView的每一行DataBoundItem时候,如果符合某个条件的话,则移除List<Ent ...

  9. c语言1作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9932 我在这个课程的目 ...

  10. [Python3] 027 常用模块 time

    目录 time 1. 时间戳 2. UTC 时间 3. 夏令时 4. 时间元组 5. 举例 5.1 例子1 例子2 例子3 例子4 例子5 例子6 例子7 time 1. 时间戳 一个时间表示,根据不 ...