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) + ')');
随机推荐
- Babel6.x的安装过程
1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --sav ...
- LibieOJ 6170 字母树 (Trie)
题目链接 字母树 (以每个点为根遍历,插入到trie中,统计答案即可)——SamZhang #include <bits/stdc++.h> using namespace std; #d ...
- codevs——1008 选数
1008 选数 2002年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 已知 n ...
- Light oj 1134 - Be Efficient (前缀和)
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1134 题意: 给你n个数,问你多少个连续的数的和是m的倍数. 思路: 前缀和取 ...
- Codeforces Gym 100431A Achromatic Number 欧拉回路
原题链接:http://codeforces.com/gym/100431/attachments/download/2421/20092010-winter-petrozavodsk-camp-an ...
- 东方14ACM小组 15:Challenge 11
Challenge 11 查看 提交 统计 提问 总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 262144kB 描述 给一个长为N的数列,有M次操作,每次操作是 ...
- 老哥你真的知道ArrayList#sublist的正确用法么
我们有这么一个场景,给你一个列表,可以动态的新增,但是最终要求列表升序,要求长度小于20,可以怎么做? 这个还不简单,几行代码就可以了 public List<Integer> trimL ...
- Java随机数技巧-新手篇
package 向家康; import java.util.concurrent.ThreadLocalRandom; public class 练习21 { public static void m ...
- fastscript增加三方控件
fastscript增加三方控件 A.关于如何使用第三方控件,增加方法.属性.事件)举例如下: 如:有一控件为edtbutton:TedtButton,我们需要在动态脚本中使用该控件.我们采用如下方法 ...
- 跳转到指定页面popToViewController用法
有人问popToViewController的用法 就写了下了 希望能帮到有需要的人 [self.navigationController popToViewController:[self.navi ...