自己常用的改变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. CI Weekly #6 | 再谈 Docker / CI / CD 实践经验

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  2. 【.NET深呼吸】基础：自定义类型转换

    照例,老周在开始吹牛之前,先讲讲小故事,这是朋友提出的建议,老TMD写技术有什么了不起的,人人都会写.后来老周想想,也确实,代码谁不会写,能写到有品位有感悟,就不容易做到.于是,老周接受了该朋友的建议 ...

  3. JavaScript高级编程 (2) - HTML 与 JavaScript

    向HTML 页面中插入JavaScript 的主要方法,就是使用<script>元素.这个元素由Netscape 创造并在Netscape Navigator 2 中首先实现.后来,这个元 ...

  4. 【java】细说 JAVA中 标注 注解（annotation）

    Java注解是附加在代码中的一些元信息,用于一些工具在编译.运行时进行解析和使用,起到说明.配置的功能.注解不会也不能影响代码的实际逻辑,仅仅起到辅助性的作用 下面我们来详细说说这个注解,到底是怎么一 ...

  5. 学习ASP.NET Core，你必须了解无处不在的“依赖注入”

    ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middleware自身的实现,以及构建在这个管道的应用,都需要 ...

  6. 如何给现有的PDF文件添加页码

    如何给现有的PDF文件添加页码 之前我写了如何打印PDF文件,有人qq问我怎样在打印时给PDF文件添加页码,的确,给PDF文件添加页码,可以帮助我们区分纸质档的PDF文件页面的先后顺序,方便我们对它的 ...

  7. Swift 必备开发库 (高级篇) (转)

    1.CryptoSwift swift加密库, 支持md5,sha1,sha224,sha256... github地址: https://github.com/krzyzanowskim/Crypt ...

  8. Elasticsearch的CRUD：REST与Java API

    CRUD(Create, Retrieve, Update, Delete)是数据库系统的四种基本操作,分别表示创建.查询.更改.删除,俗称"增删改查".Elasticsearch ...

  9. awk使用说明

    原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...

  10. [Asp.net 5] Caching-缓存架构与源码分析

    首先奉献caching的开源地址[微软源码] 1.工程架构 为了提高程序效率,我们经常将一些不频繁修改,但是使用了还很大的数据进行缓存.尤其是互联网产品,缓存可以说是提升效率优化第一利器.微软为我们实 ...