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 ...
随机推荐
- 将训练好的tensorflow模型移植到android应用中
具体步骤如下: 1. TFLiteConverter保存模型 修改网络模型代码,将模型通过TFLiteConverter转化成为 TensorFlow Lite FlatBuffer即为.tflit ...
- 使用var提升变量声明
使用var 定义变量还会提升变量声明,即使用var定义:function hh(){ console.log(a); var a = 'hello world';}hh() //undefined 不 ...
- nginx下配置vue前端项目
server { listen 80; server_name _; root /opt/h5/index/; location / { index index.html index.htm inde ...
- P4995 跳跳!
喵喵喵好久没做过贪心的题目了,刷一下免得忘了嘤嘤嘤 题面 虽然是黄题,但是我承认并不是很难,so看代码吧还是.. #include<set> #include<map> #in ...
- XSS绕过WAF的姿势
初始测试 1.使用无害的payload,类似<b>,<i>,<u> 观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如 ...
- HDU 1176 免费馅饼 (动态规划、另类数塔)
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- airflow部署
官网: http://airflow.apache.org/installation.html 原理: https://www.cnblogs.com/cord/p/9450910.html 安装: ...
- [转帖]yum 下载rpm包 之前不知道具体的存放路径.
使用Yum下载RPM包-进击的二狗子-51CTO博客 https://www.2cto.com/os/201905/807225.html yumdownloader 命令 yum install y ...
- [转帖]小米手环采用RISC-V 指令集芯片
小米手环4或用“黄山一号”芯片,雷军再回前线,未来走向如何 静心科技 06-1111:19 忘记来源地址了 不过国内的很多东西都是有中国特色的 比如飞腾 比如麒麟(银河麒麟 还有华为的麒麟 980) ...
- mybatis使用的一点小结:session运行模式及批量提交(转)
mybatis的执行器有三种类型: ExecutorType.SIMPLE 这个类型不做特殊的事情,它只为每个语句创建一个PreparedStatement. ExecutorType.REUSE 这 ...