CSS

 .table_container input[type="checkbox"] {
background: #fff url(/img/blue.png);
background: none;
*background: none;
} .table_container .checkbox {
min-height: 20px;
padding-left: -20px;
position: relative;
}
.table_container input[type="checkbox"]:checked + label:before,
.table_container input[type="checkbox"]:not(:checked) + label:before {
background: #fff url(/img/blue.png);
content: " ";
height: 20px;
left:;
position: absolute;
width: 20px;
}
.table_container input[type="checkbox"]:checked + label:before {
background-position: -22px 0;
} .table_container input[type="checkbox"][disabled]:not(:checked) + label:before {
background-position: -44px 0;
}
.table_container input[type="checkbox"][disabled]:checked + label:before {
background-position: -66px 0;
}

HTML

<div class="checkbox">
<input type="checkbox" name="table_cbox" id="table_cbox" />
<label for="table_cbox"></label>
</div>

checkbox 背景图片 纯CSS处理办法的更多相关文章

  1. js实现点击切换checkbox背景图片

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  2. 关于iphone 6 ios8网站背景图片错乱的问题解决办法

    最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...

  3. 背景图片与 CSS的那些事

    在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...

  4. html css:背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  5. Win7无法设置背景图片的快速解决办法

    不知道怎么回事,win7电脑突然连个性化设置背景图片的按钮都没了.真操蛋~~~满屏的黑色背景图案,看着实在是不爽. 为了解决这个问题,网上搜索了好长时间,都不尽然! 最后想到了一个超简单的方法就是: ...

  6. radiobutton以及checkbox背景图片拉伸变形的问题

    设置RadioButton的text属性,只需要有这个属性就可以(设置“”内容就行),然后再添加textsize属性,将字体大小属性值设置为比较小,我设置为2sp.运行后我们会发现图片变形问题不复存在 ...

  7. H5 背景图片自适应屏幕问题解决办法

    今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...

  8. input复选框checkbox默认样式纯css修改

    修改之前的样式  修改之后的样式 html <input type="checkbox" name="btn" id="btn1"&g ...

  9. $设置背景图片的css

    $('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');

随机推荐

  1. Linux 之 Xunsearch(2)

    Linux 之 Xunsearch(2) 参考教程:[千峰教育] Xunsearch的项目配置文件: 基本说明: (1)项目配置是一个项目的核心灵魂,非常重要,通常保存为.ini文件, 通常存储在/u ...

  2. window.getComputedStyle——ref

    componentDidMount() { const LeftHeight = window.getComputedStyle(this.leftDom).height; console.log(L ...

  3. 常用工具篇(二)死链接扫描工具–Xenu

    一个网站上线一段时间之后,可能出现很多的死链接,死链接就是那些打不开的链接,或者是请求是404的,可能是因为有的文件位置移动了,或者有的功能不好使了,可能会影响我们网的功能,我们就要隔一阵扫描一下网站 ...

  4. 一维数组解最长上升公共子序列(LCIS)

    #include<bits/stdc++.h> using namespace std; + ; int n,a[maxn],b[maxn],dp[maxn]; int main() { ...

  5. Wannafly挑战赛2 D.Delete(拓扑排序 + dij预处理 + 线段树维护最小值)

    题目链接  D.Delete 考虑到原图是个DAG,于是我们可以求出每个点的拓扑序. 然后预处理出起点到每个点的最短路$ds[u]$, 和所有边反向之后从终点出发到每个点的最短路$dt[u]$. 令点 ...

  6. 为什么BT网络中迅雷的速度会这么快,比其它BT软件快

    先看迅雷加速通道的几个概论,参考:http://www.cnblogs.com/EasonJim/p/6608544.html 我个人理解,在传统BT软件中,基于P2P的网络是不具备以上条件去加速的, ...

  7. html中的列表标签

    1.<dl>定义列表,<dt>定义列表中的项目,<dd>对项目的描述 例: 效果: 2.<ul>无序列表,<li>列表项 例: 效果: 3. ...

  8. linux系统中mysql自动备份脚本

    mysql数据库中存储着网站最核心最宝贵的数据,如果因为不可预测的原因导致数据损坏或丢失,对一个网站的打击是毁灭性的,一次又一次的教训提醒着我们一定要做好备份,但是手工备份确实比较麻烦,每天都要手工操 ...

  9. centos 升级内核失败回救

    在升级 centos6.3上使用, yum -y update  ... 灾难出现了!!! 解决方法: 1. 在机器启动的时候, 按F1, 会出现选择内核,选一个原来的. 2. vim /etc/gr ...

  10. Spring 让 LOB 数据操作变得简单易行,LOB 代表大对象数据,包括 BLOB 和 CLOB 两种类型

    转自:https://www.ibm.com/developerworks/cn/java/j-lo-spring-lob/index.html 概述 LOB 代表大对象数据,包括 BLOB 和 CL ...