<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. [Nova ERROR] InternalError: Nova requires QEMU version 2.5.0 or greater.

    目录 文章目录 目录 问题 调查 解决 问题 nova-compute service 启动失败 InternalError: Nova requires QEMU version 2.5.0 or ...

  2. java 接口default的判断规则

    1.前言 jdk1.8中新增加了default关键字,就是在接口中可以增加默认实现. 因为改动接口所有的实现类都要改动,所以增加了default关键字后不需要修改其他类,默认给所有实现类增加了方法. ...

  3. 一文搞懂HTTP和HTTPS协议

    1.什么是协议? 网络协议是计算机之间为了实现网络通信而达成的一种"约定"或者"规则",有了这种"约定",不同厂商的生产设备,以及不同操作系 ...

  4. c/c++ 链表实现

    //链表的基本用法代码实现/************************************************************************/ /* Created: ...

  5. switch-case分支结构总结

    1,格式 switch(表达式){ case 常量1:执行语句1: case 常量1:执行语句1: ... ... case 常量n:执行语句n: default:执行语句:} 2,说明: 根据swi ...

  6. 导入已有项目到svn

    版本管理一直是程序员使用频率比较高的一个工具软件.不管你是自己使用还是使用别人提供的svn服务,svn的使用技巧都一个必须掌握的技术.为止小编专门制作了关于svn使用技巧的系列文章.今天我们先来介绍一 ...

  7. springboot基于CORS处理跨域问题

    1. 为什么有跨域问题 跨域不一定都会有跨域问题. 因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击. 因此:跨域问 ...

  8. Ubuntu下更新Pycharm时权限不够(PyCharm does not have write access to...)

    问题描述 更新Pycharm时,出现如下问题 PyCharm does not have write access to /usr/local/software/pycharm-2019.1.3. P ...

  9. 11.jQuery之自定义动画

    注意:animate里面是一个对象,他有几个参数,详情可以参考官网 <style> div { position: absolute; width: 200px; height: 200p ...

  10. jenkins配置windows节点遇到的问题

    配置:https://blog.csdn.net/liuchunming033/article/details/52025541 错误: 使用slave-agent.jnlp启动时报以下错误,是mas ...