checkbox 背景图片 纯CSS处理办法
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处理办法的更多相关文章
- js实现点击切换checkbox背景图片
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...
- 关于iphone 6 ios8网站背景图片错乱的问题解决办法
最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...
- 背景图片与 CSS的那些事
在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...
- html css:背景图片链接css写法
图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...
- Win7无法设置背景图片的快速解决办法
不知道怎么回事,win7电脑突然连个性化设置背景图片的按钮都没了.真操蛋~~~满屏的黑色背景图案,看着实在是不爽. 为了解决这个问题,网上搜索了好长时间,都不尽然! 最后想到了一个超简单的方法就是: ...
- radiobutton以及checkbox背景图片拉伸变形的问题
设置RadioButton的text属性,只需要有这个属性就可以(设置“”内容就行),然后再添加textsize属性,将字体大小属性值设置为比较小,我设置为2sp.运行后我们会发现图片变形问题不复存在 ...
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
- input复选框checkbox默认样式纯css修改
修改之前的样式 修改之后的样式 html <input type="checkbox" name="btn" id="btn1"&g ...
- $设置背景图片的css
$('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');
随机推荐
- DB2数据库 CASE WHEN的使用
THEN T1.INSURANCEMATURITYDATE ELSE T1.COMMERCIALENDDATE END as m, T1.INSURANCEMATURITYDATE ,T1.COMME ...
- awk数组详解、实战
1.其它编程语言数组的下标一般从0开始,awk中数组下标默认从1开始,也可以从0开始设置: awk 'BEGIN{huluwa[0]="大娃";huluwa[1]="二娃 ...
- luogu P2056 采花
题目描述 萧芸斓是 Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了 n 朵花,花有 c 种颜色(用整数 1-c 表示) ,且花是排成 ...
- Android常见的三种内部类
在java里类中再定义类,这种在其他类内部类叫做内部类,在Android开发里最常见有三种内部类分别是(成员内部类.方法内部类.匿名内部类) 一.成员内部类 1 public class Test { ...
- 转:如何mac下使用wireshark
Mac OS Mountain Lion默认是没有安装X11的,而wireshark运行需要x11,因此如果直接安装wireshark而没有安装x11,wireshark不会正常运行. 去苹果主页下载 ...
- Git 的使用Git Bash和Git GUI
使用Github也有一年的时间了,之前一直都是使用的Github客户端,对提交,更新,克隆,合并,分支有一定的了解和实践.一直都想试试命令行的形式,但是感觉可能桌面版的方便就没有做. 可是Github ...
- Android记录24-WebView实现白天/夜间阅读模式
前言 本篇博客给大家分享一个WebView的使用案例.实现Android调用JavaScript代码来控制白天/夜间模式. 关于WebView怎样使用,官网有非常好的说明,Building Web A ...
- C++ 继承与接口 知识点 小结(一)
[摘要] 要求理解覆盖.重载.隐藏的概念与相互之间的差别.熟记类继承中对象.函数的訪问控制:掌握虚函数.虚函数表.虚函数指针的联系:理解区分虚函数和虚继承在虚方法.虚指针在空间分配上的重点与难点:熟练 ...
- Path SumI、II——给出一个数,从根到子的和等于它
I.Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up a ...
- C++11 并发指南三(std::mutex 详解)(转)
转自:http://www.cnblogs.com/haippy/p/3237213.html 上一篇<C++11 并发指南二(std::thread 详解)>中主要讲到了 std::th ...