使用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 ...
随机推荐
- c语言指针学习【转】
前言 近期俄罗斯的陨石.四月的血月.五月北京的飞雪以及天朝各种血腥和混乱,给人一种不详的预感.佛祖说的末法时期,五浊恶世 ,十恶之世,人再无心法约束,道德沦丧,和现在正好吻合.尤其是在天朝,空气,水, ...
- 【洛谷 P1631】 序列合并 （堆）
题目链接 直接暴力搞是\(n\)方的复杂度.\(n^2\)个数选\(n\)个最小的,容易想到堆. 我们堆里记录两个信息:到\(A\)数组哪个位置了,到\(B\)数组哪个位置了, 我直接把这两个信息存在 ...
- bootstrap-datetimepicker年视图中endDate设置之后比正常时间提前两个月
问题 bootstrap-datetimepicker年视图中endDate设置结束时间为2016-08,(即8月之后的日期不能选)而在日历上显示时为2016-06,相差两个月,即6月之后的日期不能选 ...
- 原生sql和django的事务控制
def test(request): with connections['default'].cursor() as c: try: with transaction.atomic(using='de ...
- 关于Solaris的一些小技巧
关于Solaris的一些小技巧 http://blog.chinaunix.net/uid-9787800-id-2394301.html SunOS 操作命令及linux区别 http://blog ...
- 慎用Java递归调用
总结:慎用Java递归调用,测试时可以尝试该方法,否则尽量不要使用递归!递归过多调用时,最好改为for或者whlie来代替. 在java语言中,使用递归调用时,如果过多的调用容易造成java.lang ...
- krpano--控制热点跳转到场景的指定视角
krpano课堂(肥宗) · 2015-07-13 19:32 有这么一种情况,假设我们用三个场景,这三个场景恰好是一条街道的同一方向的三个拍摄点.如上图. 我们可以通过设置A.B.C三个场景中的vi ...
- UVALive - 5844
题是pdf版 Sample Input23mississippinni55i55ippi2foobar|=o08arSample Output10 /** 题意:给出一个normal串,一个leet串 ...
- selenium 截图 添加时间戳
在自动化程序中运行的代码报错信息或者是相关日志有可能并无法直观的判断出错信息.因此截图是避免不了的.为了避免因为重复运行或者是图片名称相同导致截图被覆盖. 建议在截图时使用时间戳,保证截图图片名称的唯 ...
- Nodejs解决所有跨域请求
Nodejs解决所有跨域请求 app.use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); ...