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 ...
随机推荐
- 我非要捅穿这 Neutron(一)网络实现模型篇
目录 文章目录 目录 前言 传统网络到虚拟化网络的演进 单一平面网络到混合平面网络的演进 Neutron 简述 Neutron 的网络实现模型 计算节点网络实现模型 内外 VID 转换 网络节点网络实 ...
- 如何修改eclipse中的maven的仓库地址
最近的有一个朋友问我如何修改eclipse的maven的本地仓库,我想了一下,这个玩意一般是不用修改的,主要是你本地安装的maven在哪个位置,一般的本地仓库位置在 C:\Users\username ...
- Centos7 yum 源安装nginx
一.建立nginx源 vim /etc/yum.repos.d/nginx.repo [nginx]name=nginx repobaseurl=http://nginx.org/packages/c ...
- python小游戏2
import hashlib 过段时间会来解释下hashlib的源码(能力有限请大家谅解)#根据md5模块来加密密码 def pwd_md5(pwd): ''' 加密用户输入过来的密码 :param ...
- mac os cmake安装
1.下载安装程序,地址为 http://www.cmake.org/download/,下载 Unix/Linux Source (has \n line feeds) cmake-3.0.2.tar ...
- Android Studio 如何获取 text文本内容
1.找到目录的main先建立assets格式的文件夹 2.再把需要读取的txt 文件放入到该文件夹下(名字随意),这里取 list.txt. 文件内容 格式如下 3.读取文本内容 工具代码 /** * ...
- linux命令之import
linux下截屏除了printscreen按键外,还可以用improt命令. 该命令最常用的两种方式: 1.鼠标选择范围截屏:import mypicture.jpg 2.截取全屏:import -w ...
- TCP和UDP头部格式的了解?
tcp头部格式如下图所示: 1.源端口号,16位,发送方的端口号. 2.目标端口号,16位,发送方的目标端口号. 3. 32为序列号,sequence number,保证网络传输数据的顺序性. 4. ...
- solve update pip 10.0.0
The bug is found in pip 10.0.0. In linux you need to modify file: /usr/bin/pip from: from pip import ...
- 字符串连连看 (和hihocoder 字符消除类似)
题目描述 对于输入的字符串,从左到右扫描字符串,如果存在由三个以上(包括三个)连续相同字符组成的子串,就将这个子串从原串中去掉,并将原有字符串剩下的部分拼接到一起.重复上述过程,直到无法去掉任何子串 ...