<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. 微信小程序UI学习

    1.大纲: 2.flex的布局: 3.相对定位和绝对定位: position: relative   相对定位 position: absolute  绝对定位

  2. 【疑难杂症】【Solved】maven-compiler-plugin 在 idea 下的问题

    maven-compiler-plugin 这个插件在idea和eclipse里表现本质是一样的,但是我之前有个细节没注意到,导致我对此有误解.我之前一直以为只要配置了source和target,相应 ...

  3. 【react】input输入框可输入的最好实现方式

    使用的是refs.react中输入框不能直接定义value.输入框是可变的,react会提示报错.需要使用的inChange事件(输入框内容被改变时触发). 要定义输入框初始值,需要在componen ...

  4. 【Python开发】【神经网络与深度学习】如何利用Python写简单网络爬虫

    平时没事喜欢看看freebuf的文章,今天在看文章的时候,无线网总是时断时续,于是自己心血来潮就动手写了这个网络爬虫,将页面保存下来方便查看   先分析网站内容,红色部分即是网站文章内容div,可以看 ...

  5. 【神经网络与深度学习】【python开发】caffe-windows使能python接口使用draw_net.py绘制网络结构图过程

    [神经网络与深度学习][python开发]caffe-windows使能python接口使用draw_net.py绘制网络结构图过程 标签:[神经网络与深度学习] [python开发] 主要是想用py ...

  6. 【VS开发】修改MainFrame窗口名称1

    在VS2010下新建一个MFC的多文档应用程序,程序默认的标题是"文档名-工程名".图标默认的是写着MFC的三个方块.但在很多软件中都不是使用的默认设置,开发者们都将标题和图标改过 ...

  7. adb将Apk内置到系统中(system/priv-app)

    https://blog.csdn.net/starhosea/article/details/78697007 so文件的处理是目前遇到过的问题.文章中解释了. 正文: 有时候我们在Android ...

  8. python 正则sub的使用

     self.content = re.sub(r'>|<',lambda x: '&gt' if x.group()[0] == '>' else '&lt' , s ...

  9. 红帽学习笔记[RHCSA] 第十课[计划任务Cron与At、逻辑卷管理]

    计划任务[At & Cron Jobs] at # at 命令只能计划一次性任务但是比较方便. # 先输入时间 [root@localhost Desktop]# at 10:02 # 输入要 ...

  10. Linux系统装mycat

    最近在Linux系统中装载了一下mycut,记录过程以及所遇到的异常 首先是mycut的压缩包,直接放到linux中解压即可 链接:https://pan.baidu.com/s/1qo7z4tNvk ...