自己常用的改变checkbox样式的两个方法：

一.利用background用图片代替checkbox效果

缺点：你首先得有一张好看的图片

优点：浏览器兼容性好

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>chec</title>

<style>

#wrapper {margin: 20px auto;}

#wrapper .input_check {position: absolute;width: 20px;height: 20px;visibility: hidden;}

#wrapper span {position: relative;}

#wrapper .input_check+label {display: inline-block;width: 20px;height: 20px;background: url(checkbox2.png) no-repeat;background-position: -31px -3px;}

#wrapper .input_check:checked+label {background-position: -5px -3px;}

</style>

</head>

<body>

<h3>利用background用图片代替checkbox效果</h3>

<div id="wrapper">

<span><input type="checkbox"class="input_check" id="check1"><label for="check1"></label></span>

<span><input type="checkbox"class="input_check" id="check2"><label for="check2"></label></span>

</div>

</body>

</html>

二.利用css的：after跟transform属性代替checkbox效果

优点：不需要图片，纯css搞定

缺点：兼容性，不用说你也知道我指的是哪个奇葩浏览器

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>chec</title>

<style>

#container {margin: 20px auto;}

#container span {position: relative;}

#container .input_check {position: absolute;visibility: hidden;}

#container .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}

#container .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px;

border: 2px solid #fd8845;border-top-color: transparent;border-right-color: transparent;

-ms-transform: rotate(-60deg);

-moz-transform: rotate(-60deg);

-webkit-transform: rotate(-60deg);

transform: rotate(-45deg);}

</style>

</head>

<body>

<h3>利用css的：after跟transform属性代替checkbox效果</h3>

<div id="container">

<span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>

<span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>

</div>

</body>

</html>

用css改变默认的checkbox样式的更多相关文章

  1. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  2. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

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

    <!--html--> <label class="bl_input_checkbox click_checkbox" che_data="10&quo ...

  4. android 下改变默认的checkbox的 选中 和被选中 图片

    1.   先导入  checked.png 和 unchecked.png 两张图片 2.  在res/drawable下面,添加selector (如 check_state.xml)文件: < ...

  5. css改变谷歌浏览器的滚动条样式

    详细内容请点击 /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{        height:50px;    outline-offset:-2px;   ...

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

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

  7. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  8. css改变input显示的样式

    设置input宽高,边框大小颜色,背景颜色,字体颜色,字体大小,背景图片,去除蓝色边框. input{width:80px ;height:30px;border:1px solid red;colo ...

  9. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

随机推荐

  1. PHP日志压缩下载

    主要实现了在后台查看日志列表及打包下载功能. 由于用到了PHP压缩功能,特此记录下. 压缩下载类: Hzip.php <?php /** * Created by PhpStorm. * @au ...

  2. 阿里云accessKey如何创建？~ 2015.08.25

    选择导航条上面的ACCESSKeys(工单服务左边,我一开始也没注意到) 创建一下,然后同意 验证一下 收工

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（19）-权限管理系统-用户登录

    系列目录 我们之前做了验证码,登录界面,却没有登录实际的代码,我们这次先把用户登录先完成了,要不权限是讲不下去了 把我们之前的表更新到EF中去 登录在Account控制器,所以我们要添加Account ...

  4. TCP三次握手的正确使用姿势

    背景 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次. 从好上开始,到现在,一年多也算坚持下来了. 问题 有时候聊天的过程中,我的网络或者她的网络可能会不好,视频就会卡住,听不到对方的声 ...

  5. RAC 某节点不可用时，对应VIP是否可用

    实验环境:RHEL 6.5 + GI 11.2.0.4 + Oracle 11.2.0.4 验证:RAC 某节点不可用时,其对应VIP是否可用?是否可用于连接数据库? [grid@jyrac2 ~]$ ...

  6. Python基础（二）

    本章内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典.set集合) for 循环 enumrate range和x ...

  7. DataAccess通用数据库访问类，简单易用，功能强悍

    以下是我编写的DataAccess通用数据库访问类,简单易用,支持:内联式创建多个参数.支持多事务提交.支持参数复用.支持更换数据库类型,希望能帮到大家,若需支持查出来后转换成实体,可以自行扩展dat ...

  8. C# 文件下载之断点续传

    注意,本文所说的断点续传特指 HTTP 协议中的断点续传.本文主要聊聊思路和关键代码,更多细节请参考本文附带的 demo. 工作原理 HTTP 协议中定义了一些请求/响应头,通过组合使用这些头信息.我 ...

  9. iOS绘制收益柱状图

    项目需求,参考了其他绘图demo,自己绘制出来了,不过代码改得有点乱,添加了很多变量,时间关系没用太合适的命名,逻辑处理也没进行优化. 看看效果图(虚线区域都是画的,其他区域添加的都是控件),附上源码 ...

  10. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...