思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CSS3选择器:checked  + 毗邻选择器,选中后给伪元素,或者其他元素添加选中样式;

 
兼容:
    :after 兼容IE8+
    : checked  兼容IE9+
    综上述:自定义样式兼容IE9+
    可使用IE8hack的方式,让IE8-使用原来的checkbox样式
 
代码:

<!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>
 
使IE8-能够正常使用原本样式的checkbox方法:
    上方代码使用after伪元素覆盖了input,并没有使用css隐藏掉input,为的就是在IE8-的时候能隐藏为元素,使用原来的checkbox,这里就要运用到单独为IE8书写的hack了
    .label1 {
position: relative;
color: red\0; /*IE8+都能使用这条样式,这行需写在IE7hack之上,在win10中测试的时候发现,IE7执行了该行样式,但是数值为空*/
+color: red; /*IE7才能使用这条样式*/
}
form:nth-child(1) .label1 { /* IE9+才能使用的样式*/
color: green;
}
结构参考上面的代码
如上样式,在IE7和IE8中字体为红色,IE9+和其他常用浏览器则为绿色,这样就能达到在低版本浏览器中使用自带checkbox,高版本浏览器使用自定义样式的checkbox了,还是挺使用的;
如果有更好的实现和兼容方式,请在评论中告知,谢谢了;
 
一些漂亮的样式可以参考下这个博客
    

使用CSS实现自定义input[checkbox]样式的更多相关文章

  1. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  2. 自定义radio/checkbox样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  4. 使用css修改radio、checkbox样式

    input[type=radio],input[type=checkbox]  { display: inline-block; vertical-align: middle; width: 20px ...

  5. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  6. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

  7. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  8. 自定义常用input表单元素一:纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  9. 关于input 的选中,自定义input[type="checkbox"]样式

    1.css 呈现   选中后 的input的样式可以用 /*背景图*/      background:url('../pc/images/archives/icon_choosed.png') no ...

随机推荐

  1. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  2. 数据安全之MD5、SHA-1、CRC32区别

    crc32 — 计算一个字符串的 crc32 多项式 生成 string 参数的 32 位循环冗余校验码多项式……:这句话从英文翻译过来的,不正确,准确的说应该是这么理解: 以32位循环冗余校验多项式 ...

  3. 进一步认识golang中的并发

    如果你成天与编程为伍,那么并发这个名词对你而言一定特别耳熟.需要并发的场景太多了,例如一个聊天程序,如果你想让这个聊天程序能够同时接收信息和发送信息,就一定会用到并发,无论那是什么样的并发. 并发的意 ...

  4. Linux nc (netcat) 详解

    Linux nc (netcat) 详解 http://blog.csdn.net/michael493439861/article/details/7445454

  5. postman接口间关联

    现有A.B两个接口,A接口返回的response的body中的部分数据,是B接口发起请求部分数据的来源. A接口response的body结构如下: { "address": &q ...

  6. java字节流和字符流编码格式(转自姚刚)

    /** * 字节流和字符流的区别, * (1)字符流带有缓冲,必须flush或close后数据才会从缓存中写入磁盘文件. * 字节流直接写文件. * (2)字符流在创建流的时候,指定编码,字节流在文件 ...

  7. win7 安全模式开启声音

    下载运行这个reg文件 http://files.cnblogs.com/files/bushe/Activate_Sound_in_SafeMode.rar

  8. HDU 2280 Tetris Comes Back

    状态压缩,$dp$,预处理. 设$dp[i][j]$为前$i-1$行填满,第$i$行为状态$j$的最小需要$1$种类的数量.预处理好每种状态能推出哪些状态,并且记录下所需花费就可以了. #pragma ...

  9. golang笔记:unsupported driver -> Scan pair: <nil> -> *string

    golang里,操作mysql数据库,使用查询语句的时候,一般的写法 rows, err := db.Query("select name from table") if err ...

  10. 简单DP【p2758】编辑距离

    Description 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一个字符: ...