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 ...
随机推荐
- 前端UI框架搜集
网址:https://blog.csdn.net/will5451/article/details/80652429?utm_source=blogxgwz6 网址:https://www.cnblo ...
- 四十六:数据库之Flask-SQLAlchemy的使用
一:连接数据库1.安装:pip install flask-sqlalchemy2.将数据库信息更新到app.config['SQLALCHEMY_DATABASE_URI']3.使用flask_sq ...
- shell命令find删除修改后带尾巴的重复的文件
命令:find . -name "*~" -delete 说明:在linux中 点号(.)表示当前目录,连续的连个点号(..)表示父级目录 作用:在linux中,我经常会遇到这样的 ...
- java:Spring框架1(基本配置,简单基础代码模拟实现,spring注入(DI))
1.基本配置: 步骤一:新建项目并添加spring依赖的jar文件和commons-logging.xx.jar: 步骤二:编写实体类,DAO及其实现类,Service及其实现类; 步骤三:在src下 ...
- MyBatis框架原理4:插件
插件的定义和作用 首先引用MyBatis文档对插件(plugins)的定义: MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用.默认情况下,MyBatis 允许使用插件来拦截的方法调用 ...
- [开发技巧]·TopN指标计算方法
[开发技巧]·TopN指标计算方法 1.概念介绍 在图片分类的中经常可以看到Top-1,Top-5等TopN准确率(或者时错误率). 那这个TopN是什么意思呢?首先Top-1准确率最好理解,就是 ...
- CodeSmith 找不到请求的 .Net Framework Data Provider
连接数据库时候报标题的错误解决方案 安装mysql-connector-net-6.8.7.msi,下载地址:http://dev.mysql.com/downloads/connector/net/ ...
- c++嵌入linux指令以查找文件夹
char buf[256]={0}; char cmd[64] ={0}; FILE *fp=NULL; snprintf(cmd,sizeof(cmd),"ls %s",&quo ...
- Statistics项目学习笔记
1. http://218.244.157.0:55443/index.html 初始访问时,弹出的窗口为index.html文件,文件有html命令组成.html展现的UI界面用的是WIN10-UI ...
- MongoDB数据库的操作
一.操作MongoDB数据库 1.创建数据库 语法:ues 注意:如果数据库不存在则再创建数据库,否则切换到指定的 数据库!如果刚刚创建的数据不在列表中,如果需要显示这个数 据库,那么需要在刚刚创建的 ...