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 ...
随机推荐
- http协议详解之响应报文 3
--------------响应示例--------------------------response#状态行HTTP/1.1 200 OK #协议及版本号.状态码.状态描述 #消息报头Date: ...
- Java学习之==>数组【array】
一.定义数组 /** * 一维数组定义 * * 为数组插入元素 */ public void case1() { // 声明 int[] arr1; // 声明+初始化 int[] arr2 = ne ...
- mysql 8.0.12 安装配置方法图文教程
一.安装 1.从网上下载MySQL8.0.12版本,下载地址 2. 下载完成后解压 我解压的路径是:D:\Java\mysql-8.0.12-winx64 3. 配置文件 首先在解压的路径下查看是否含 ...
- kh67-wjs
个人简历 基本信息 姓 名: 性 别: 年 龄: 籍 贯: 联 ...
- Educational Codeforces Round 64 -C(二分)
题目链接:https://codeforces.com/contest/1156/problem/C 题意:给出n个数和整形数z,定义一对数为差>=z的数,且每个数最多和一个数组成对,求最多有多 ...
- 【转帖】国产x86处理器KX-6000发布
国产最先进x86处理器KX-6000发布:8核3.0GHz 力压酷睿i5处理器 https://www.cnbeta.com/articles/tech/858981.htm 全网所有的网页都写错了 ...
- 手撕ES6--Promise
手撕ES6--Promise:https://www.jianshu.com/p/0925eae38d2c 手写一个Promise,附源码分析:https://blog.csdn.net/weixin ...
- 洛谷 U78696 图书馆馆长的考验 题解
题面 1. 图书馆馆长的考验(library) 红魔馆的拥有者蕾米莉亚的好友帕秋莉是红魔馆的大图书馆的馆长.擅长操纵五行,名言是“万物都有属性.所谓的属性,和弱点是一样的”. 一天,因为魔理沙看了神之 ...
- phpstorm 不能选择 php language level
最近需要更改phpstorm中的php language level发现更改不了 解决方法是在PHP 下面的Composer中勾选了同步 composer php版本的原因 取消勾选,点击应用就可以了
- python之代码规范
第一章 为什么要有规范化目录 真正的后端开发的项目,系统等,少则几万行代码,多则十几万,几十万行代码 软件开发,规范你的项目目录结构,代码规范,遵循PEP8规范等等,让你更加清晰,合理开发. 1.代码 ...