自己常用的改变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. Google翻译之路

    如何将整个网站都翻译成某种语言,想必大家都有碰到这样的问题吧. 如果能够访问Google的话, 那这个太容易不过了. 来看,下面的就是Google提供的直接翻译某个网站. http://transla ...

  2. css3属性，会动的生日蛋糕

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  3. 解析大型.NET ERP系统 权限模块设计与实现

    权限模块是ERP系统的核心模块之一,完善的权限控制机制给系统增色不少.总结我接触过的权限模块,以享读者. 1 权限的简明定义 ERP权限管理用一句简单的话来说就是:谁 能否 做 那些 事. 文句 含义 ...

  4. 我为NET狂官方面试题

    基础牢不牢测一测便了解,工作没工作测一测便清楚,工作有几年测一测便知道 最近帮人过一遍C#基础,出了点题目,有需要的同志拿走 答案不唯一,官方答案只供参考,若有错误欢迎提出~ 更新ing 1.面向过程 ...

  5. JavaScript语言精粹--Function,类，this，对象

    1.类与对象 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它 ...

  6. MVC5 网站开发之六 管理员 1、登录、验证和注销

    上次业务逻辑和展示层的架构都写了,可以开始进行具体功能的实现,这次先实现管理员的登录.验证和注销功能. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MV ...

  7. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  8. [C#] Linq To Objects - 如何操作文件目录

    Linq To Objects - 如何操作文件目录 开篇语: 上次发布的 <LINQ:进阶 - LINQ 标准查询操作概述> 社会反响不错,但自己却始终觉得缺点什么!“纸上得来终觉浅,绝 ...

  9. nginx源码分析之hash的实现

    nginx实现了自己的hash数据结构,正如数据结构中讲述的那样,nginx用开放链表法解决冲突,不过不同的是一旦一个hash表被初始化后就不会被修改,即插入和删除,只进行查询操作,所以nginx通过 ...

  10. linux2.6 内存管理——概述

    在紧接着相当长的篇幅中,都是围绕着Linux如何管理内存进行阐述,在内核中分配内存并不是一件非常容易的事情,因为在此过程中必须遵从内核特定的状态约束.linux内存管理建立在基本的分页机制基础上,在l ...