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 ...
随机推荐
- OpenStack 2018 年终盘点
目录 文章目录 目录 前言 OpenStack 一年来的成长 Nova Cinder Neutron Ironic Cyborg Octavia Kolla Magnum Zun Kuryr 从 Op ...
- Kubernetes 中文文档
Kubernetes 中文文档 如果想学习 Kubernetes 的小伙伴,可以参考如下文档学习: https://www.kubernetes.org.cn/docs 文档中详细讲解了 k8s 的设 ...
- leaflet的入门开发(一)
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...
- 打开VMware提示该虚拟机似乎正在使用中该怎么办?
一,当出现虚拟机无法使用时 解决办法: 1,找到虚拟机安装路径. 2,然后,将后缀为.lck的文件夹删除 二,VMware虚拟机配置文件(.vmx)损坏修复 1,找到后缀vmx的文件,记事本打开: 2 ...
- LeetCode.1030-曼哈顿距离排序矩阵单元格(Matrix Cells in Distance Order)
这是小川的第384次更新,第412篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第246题(顺位题号是1030).我们给出一个矩阵,其中R行和C列具有整数坐标(r,c)的 ...
- USACO3.3 Home on the Range【思维】
做完之后看到题解里面很多bfs,dfs,甚至还有dp? 写了一个不知道怎么称呼它的方法,暂且叫他乱搞吧. 用数组a[][]预处理出以当前行作为最底层,这一列从上往下的最长的1的长度. 如果这个格子为0 ...
- 去掉有序数组中的重复元素 c/c++
去掉有序数组中的重复元素: int RemoveDuplates(int A[], int nCnt) { ; ; , j = ; i < nCnt && j < nCnt ...
- zabbix 监控redis python3脚本
一:安装redis-python模块 wge thttps://pypi.python.org/packages/source/r/redis/redis-2.9.1.tar.gz tar xf r ...
- Python 入门之 内置模块 -- random模块
Python 入门之 内置模块 -- random模块 1.random模块 import random # random -- 随机数 (1)选择1-50之间随机的整数 print(random.r ...
- luoguP3261_[JLOI2015]城池攻占
题意 有一棵树\(n\)个节点,每个节点有一个防御值,以及两个属性,表示一个骑士占领该节点后攻击值是加还是乘,有\(m\)个骑士,有初始位置和初始攻击值,如果攻击值大于该节点的防御值,就能占领该节点, ...