使用CSS实现自定义input[checkbox]样式
思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.label1 {
position: relative;
}
.label1:after {
position: absolute;
top: 0px;
left: -22px;
width: 16px;
height: 16px;
background: #ededed;
border: 1px solid #dcdcdc;
content: '';
}
form input[type='checkbox']:checked + .label1:after {
background: red;
}
</style>
</head>
<body>
<form action="">
<input type="checkbox" name="a" id="a1" onchange="check()">
<label class="label1" for="a1">记住密码</label>
</form> </body>
</html>
.label1 {
position: relative;
color: red\0; /*IE8+都能使用这条样式,这行需写在IE7hack之上，在win10中测试的时候发现，IE7执行了该行样式，但是数值为空*/
+color: red; /*IE7才能使用这条样式*/
}
form:nth-child(1) .label1 { /* IE9+才能使用的样式*/
color: green;
}
结构参考上面的代码
使用CSS实现自定义input[checkbox]样式的更多相关文章
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- 使用css修改radio、checkbox样式
input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px ...
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- 自定义常用input表单元素一：纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- 关于input 的选中，自定义input[type="checkbox"]样式
1.css 呈现 选中后 的input的样式可以用 /*背景图*/ background:url('../pc/images/archives/icon_choosed.png') no ...
随机推荐
- [洛谷P3942] 将军令
洛谷题目链接:将军令 题目背景 历史/落在/赢家/之手 至少/我们/拥有/传说 谁说/败者/无法/不朽 拳头/只能/让人/低头 念头/却能/让人/抬头 抬头/去看/去爱/去追 你心中的梦 题目描述 又 ...
- 【洛谷 P2464】[SDOI2008]郁闷的小J（线段树）
题目链接 这题我很久之前用分块写过,没写出来.. 今天又看到了,于是下决心把这题做出来. 这次我用线段树写的,直接对每本书的编号Hash一下然后离散化然后各建一棵线段树,维护当前编号在某个位置有没有书 ...
- NYOJ 38 布线问题 (最小生成树 prim）
题目链接 描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件: 1.把所有的楼都供上电. 2.所用电线花费最少 输入 第一行是一个整数n表示有n组测 ...
- Sequence(ST表)(洛谷P2048)
超级钢琴 知识储备 在做这道题前,我们先要了解一下ST表(一种离线求区间最值的方法) ST表使用DP实现的,其查询复杂度为O(1). 那么我们怎么用DP实现呢?? 首先,我们设立一个状态f[i][j] ...
- Linux 远程登录——（九）
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- 点击回到之前页面，并不刷新js histroy
history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录.它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个. 这个方法的参 ...
- Selenium2+python自动化44-元素定位参数化（find_element）【转载】
前言 元素定位有八种方法,这个能看到这一篇的小伙伴都知道了,那么有没有一种方法,可以把八种定位合为一种呢?也就是把定位的方式参数化,如id,name.css等设置为一个参数,这样只需维护定位方式的参数 ...
- MATLAB的cftool工具箱简介
下面,通过一个例子说明cftool可视化界面工具箱的用法. 例如,已知 x = [0 0.2 0.50.8 0.9 1.3 1.4 1.9 2.1 2.2 2.5 2.6 2.9 3.0]; y = ...
- springBoot Feign Hystrix Dashboard
1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...
- redis设置慢查询日志
Redis 的慢查询日志功能用于记录执行时间超过给定时长的命令请求, 用户可以通过这个功能产生的日志来监视和优化查询速度. 1.redis生命周期 慢查询发生在第3阶段 2.两个配置 2.1.slow ...