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. 这是一份很有诚意的2017 Google I/O大会的汇总 & 解析

    前言 在刚过去的凌晨(北京时间 5月18日 1.00-3.00),一年一度的2017年Google I/O大会在美国谷歌山景城海岸线圆形剧场如期举行 Google I/O 大会:Innovation ...

  2. LeetCode OJ--Rotate List

    http://oj.leetcode.com/problems/rotate-list/ 取得后面k个节点,然后截断插到前面.如果k比list长,则按照求余算. 去后面的k个节点:使用两个指针,第一个 ...

  3. Java Web工程连接MySQL数据库及Tomcat服务器页面中文乱码

    Java Web工程连接MySQL数据库 一. 准备工作 1.下载连接MySQL数据库的JDBC (可以去官网下,也可以去百度云找) 2.将下载的jar文件复制到Tomcat的lib目录下 3.新建一 ...

  4. extern “C”的使用

    2016-12-11   22:40:48 VS编译的时候,可以指定编译为C代码或者C++代码.c/c++->高级.而当你新建一个cpp文件时,VS很有可能自动会把编译方式由C变成C++编译.然 ...

  5. c# Dictionary拓展2个key得到1个value

    using System.Collections.Generic; using System.Collections; Dictionary<Tuple<int, int>, int ...

  6. mysql 授权新的root用户

    grant all privileges to *.* on system@'localhost' identified by 'woshishui' with grant option;

  7. spring secrity 一些常用小知识

    1.在JSP页面获取当前登录的用户名的方法 首先引入taglib:<%@ taglib prefix="sec" uri="http://www.springfra ...

  8. QQ空间g_tk、bkn加密参数算法

    g_tk是腾讯在QQ空间这一领域使用的密文,有写数据包或者url参数中需要加入你计算出的g_tk才能成功! 下面是通过浏览器抓包工具抓取 访问该js内容找出 QZONE.FrontPage.getAC ...

  9. 实例讲解SVN分支和合并问题(转)

    本节向大家简单描述一下SVN分支和合并方面的知识,在学习SVN的过程中SVN分支和合并时经常遇到的问题,在这里和大家分享一下,希望本文对大家有用. 关于主线同SVN分支合并的概念及如何使用的误区此问题 ...

  10. Cocos2d-X中提高性能的方法

     1)内存使用效率: 使用大纹理 场景切换时,要尽量使用replaceScene 2)用好缓存: CCTextureCache(纹理缓存) CCSpriteFrameCache(精灵帧缓存) CC ...