自己常用的改变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. win10更新系统后wifi连接不上了怎么解决？

    遇到了一个小问题,由于更新了一下win10,发现wifi不能用了,以为是wifi密码错了,选择忘记密码试了两次,又试了不同的wifi都不行,发现网卡无线驱动也没事,在网上百度了好久发现说的方法都没用, ...

  2. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

  3. 结合阿里云服务器，使用FTP上传和下载文件，出现的问题和解决方案

    一.FTP出现的问题 二.在网上找的方案 如果使用FileZilla默认设置连接ftp服务器的话可能会报以下错误: 错误: 无法建立数据连接:ECONNREFUSED - Connection ref ...

  4. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  5. 在DevExpress程序中使用内置的图标构建美观的界面元素

    在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及固定场景的图标,往往给用户非常好的直观感受:统一.美观.易理解.因此在一般的程序界面中,都尽量在略 ...

  6. Button 模板和样式

    <Style TargetType="{x:Type Button}"> <Setter Property="FontFamily" Valu ...

  7. Configure bridge on a team interface using NetworkManager in RHEL 7

    SOLUTION IN PROGRESS February 29 2016 KB2181361 environment Red Hat Enterprise Linux 7 Teaming,Bridg ...

  8. bzoj1001--最大流转最短路

    http://www.lydsy.com/JudgeOnline/problem.php?id=1001 思路:这应该算是经典的最大流求最小割吧.不过题目中n,m<=1000,用最大流会TLE, ...

  9. Linux安装jdk

    查看Java的版本命令:java -version 查看java版本的方法是:运行--->cmd,输入java –version.注意: java命令后是有个空格的,-version表示参数而已 ...

  10. String类

    字符串的功能          A:判断功能                  boolean equals(Object obj)//比较对象                  boolean eq ...