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: 0;
  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>

时间: 2024-10-29 19:06:01

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

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

不知道怎么回事,win7电脑突然连个性化设置背景图片的按钮都没了.真操蛋~~~满屏的黑色背景图案,看着实在是不爽. 为了解决这个问题,网上搜索了好长时间,都不尽然! 最后想到了一个超简单的方法就是: 找到这个路径:D:\Users\Terry\AppData\Roaming\Microsoft\Windows\Themes 就是用windows画图软件打开,然后设置为背景图片即可. 我勒个去,顿时发现自己是个天才!!!O(∩_∩)O哈哈~....... Win7无法设置背景图片的快速解决办法

背景图片与 CSS的那些事

在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图,规定的位置是"20px 10px"和"60px

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

设置RadioButton的text属性,只需要有这个属性就可以(设置“”内容就行),然后再添加textsize属性,将字体大小属性值设置为比较小,我设置为2sp.运行后我们会发现图片变形问题不复存在.Prefect解决,这个是在网上找到的的解决方式. 当然有的还可以完全不用RadioButton和CheckButton来,而用Imageview的背景的图片解决选择效果的实现,因为radioButton和checkButton有时候会出现抢占焦点的问题,导致一些莫名其妙的问题.比如我Listvi

纯CSS实现圆角效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

css 背景图片自适应元素大小

一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: img{ position:absolute; z-index:-10;width:50%;} HTML: <img src="背景图片路径" /> <span>字在背景上</span> 此时,背景可以自动伸缩,不过底层图片和上面的字是无关联的,想要在屏幕变化的情况下保持二者对应关系不变,需要用百分比表示间距和尺寸.    这种方法可以实现,但是个人感觉不太规范,但当时

从零开始学_JavaScript_系列(13)——CSS&lt;2&gt;(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)

前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删. 这篇也算上周的 (10)打开一个网页时,以新窗口形式打开 将 <a href="www.baidu.com"></a> 新增属性: <a href="www.baidu.com" target="_blank"></a> 即可. (11)关于块间的莫名空隙 假设有html代码: <div id="a"> &

div背景图片或颜色不显示的解决办法

背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)DIV高度为自动,背景颜色无法显示,在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important:同时还可以兼容 IE6.7.8和谷歌火狐. (2)假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属

css背景图片、圆角、盒子阴影、浮动

一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb(0, 0, 255); background-color: #0000ff; background-color 也可被设置为透明(transparent),这会使得其下的元素可见. 3.背景图(background-image) background-image 属性允许指定一个图片展示在背景中.