html中checkbox自定义样式(css版本)


<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版本)的更多相关文章
- android中checkbox自定义样式
		
1.首先res/drawable中定义checkbox_style.xml样式: <?xml version="1.0" encoding="utf-8" ...
 - xamarin android checkbox自定义样式
		
xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...
 - Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由Route&Navigation
		
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
 - node中console自定义样式
		
最近公司的项目一直使用gulpfile打包,项目会有三种项目打包(生产环境)和监听(开发环境)两种过程,同时需要清除文件夹,希望打包时增加提示以便区分,暂时分为上述三种提示打包.监听.清除. 先上co ...
 - WPF CheckBox 自定义样式
		
WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...
 - ModernUI教程:如何从MUI样式中派生自定义样式
		
下面的步骤用来说明怎么样去创建一个基于MUI的自定义样式.让我们创建一个字体颜色显示为红色的按钮样式. 可视化显示如下: 因为我们并没有明确生命继承自MUI风格,它还是采用WPF的默认风格.我们需要设 ...
 - CheckBox自定义样式
		
效果: xmal代码: <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> & ...
 - CSS3  radio 或checkbox 自定义 样式
		
.style-radio {position:relative;width:15px;height:15px;outline:none;} .style-radio:after {position:a ...
 - WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
		
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
 
随机推荐
- Java学习之==>面向对象编程  Part1
			
一.面向对象与面向过程 1.面向过程 角度是功能,以方法为最小单位,思考的是具体怎么做. 2.面向对象 角度是抽象,以类为最小单位,思考的是谁来做. 3.示例:“小明去上班” 面向过程 起床,刷牙洗脸 ...
 - 龙芯软硬件培训个人总结-day2
			
今天最后一天,主要培训了BSP,QT,KVM云计算相关的内容.大致总结了一些自己关注的点.培训的资料已上传至服务器,如果需要可关注下方二维码,后台直接回复“资料”获取.关于实战的资料还未导出,等导出 ...
 - 【神经网络与深度学习】用训练好的caffemodel来进行分类
			
现在我正在利用imagenet进行finetune训练,待训练好模型,下一步就是利用模型进行分类.故转载一些较有效的相关博客. 博客来源:http://www.cnblogs.com/denny402 ...
 - python 正则sub的使用
			
self.content = re.sub(r'>|<',lambda x: '>' if x.group()[0] == '>' else '<' , s ...
 - javascript number与isNan
			
number 与 isnan Number:表示整数和浮点数 NaN:即非数值(not a Number)是 一个特殊的数值.是Number类型的一种. 说明:1.任何涉及NaN的操作(例如Nan/1 ...
 - [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色
			
在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作 前端控件的设置: 只要设置好OnRowDataBound属性即可,会自动在.cs文 ...
 - List<HashMap<String,String>> list, 根据hashmap中的某个键的值排序
			
来源https://blog.51cto.com/zhaodan/1725249 //可以使用Collections.sort(List list, Comparator c)来实现 这里举例hash ...
 - HTTPS为什么是安全的?
			
学习自https://www.cnblogs.com/zhangsanfeng/p/9125732.html,感谢博主 超文本传输协议HTTP被用于在web浏览器和网站服务器之间传递信息,但以明文方式 ...
 - having函数,case when与order by
			
having:用于筛选分组后的各组数据.聚合函数,和group by一起使用(where不能和聚合函数使用)group by放在order by前使用,放在之后报错SELECT user_id fro ...
 - wex5  如何利用 百度地图 定位 和 天气插件
			
引包: require("cordova!cordova-plugin-geolocation"); require("cordova!com.justep.cordov ...