自己常用的改变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. iOS--碎片知识锦集

    知识锦集day01 1.UIView的两个方法: sizeThatFits和 sizeToFit 官方文档上说: - (CGSize)sizeThatFits:(CGSize)size;     // ...

  2. Android Toolbar 开发总结

    初识 Toolbar Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android ...

  3. 06.GitHub实战系列~6.过滤器过滤掉的文件如何上传

    比如我想发布一个软件版本供普通人下载: Git库建立了VS的过滤规则后 dll 和 exe 是自动过滤的,这时候我们得加参数(看图)git add xxx -f

  4. Angular学习-指令入门

    1.指令的定义 从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势, ...

  5. 2、C#核心编程结构

     本学习主要参考Andrew Troelsen的C#与.NET4高级程序设计,这小节主要述说以下几个东西: Hello World的Main方法: 利用VS2010新建一个控制台应用程序Hello W ...

  6. SharePoint 2103 Check user permission on list

    一.需求: check user 对SharePoint list 的permission 代码如下: private static string GetListPermission(SPList l ...

  7. HTML基本元素（四）

    1.HTML框架 框架的作用就是把浏览器窗口划分成多个子窗口,而且每个子窗口都可以载入各自的HTML文档. *注意:html框架集与body同级,因此不能同时出现! 框架结构标签:<frames ...

  8. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  9. Basic Tutorials of Redis(1) - Install And Configure Redis

    Nowaday, Redis became more and more popular , many projects use it in the cache module and the store ...

  10. html+ccs3太阳系行星运转动画

    做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画. 先画好草图,设计好大小和位置,根 ...