1. 通过jquery对input:checkbox标签来进行创建如下图的效果
<div class="div1">
<input type="checkbox" class="inputstyle" style="display:none;">
</div>
你可以把上面两张图左右拼在一块，设置div1的背景图片为该图，当点击checkbox时改变背景位置，就可以达到这个效果了
2. html中的checkbox如何修改样式，想改变大小和背景
1、打开网页开发工具，新建一个HTML文件。
注意事项;
复选框提供一个制造单一选择开关的方法；它包括一个小框和一个标签。典型的复选框有一个小的“X”（或者它设置的其它类型）或是空的，这依靠项目是否被选择来决定的。
3. html中怎么设置checkbox点击打钩框的背景颜色
正好最近弄了这个
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:30px;height:30px; display: none;margin: 0px;background-color: red;" id="lable" onclick="lable_click(this);" >
<!--<img width="30px" height="30px" src="xxx.png"> 或者背景图片
(点击无背景的checkbox使它变成成有背景色的对勾，
也可以如果用2个div，一个做没有对勾的背景一个做有对勾的背景，使checked一直处于隐藏状态，每次都用
document.getElementById('checked').checked = false;)或document.getElementById('checked').checked = true;)
使没有显示的checkbox改变它的checked值。
-->
</div>
<input id="checked" type="checkbox" value="" style="width: 30px;height: 30px;display: block;margin: 0px;" onclick ="checkbox_click(this);" />
<script>
function lable_click(obj){
obj.style.display = "none";
document.getElementById('checked').style.display = "block";
document.getElementById('checked').checked = false;//
}
function checkbox_click(obj){
obj.style.display = "none";
document.getElementById('lable').style.display = "block";
}
</script>
</body>
</html>
4. DIV+CSS中复选框的背景颜色不显示，但是边框显示，为什么
原生的checkbox样式不能满足咱们的需求。所以换种方式美化一下
首先，我们需要把checkbox的透明度设置为0： opacity: 0; 然后我们需要用到span，作为checkbox的选中状态显示。接着span一个背景icon，然后根据icon的分辨率尺寸大小设置背景图片的一些属性，关键是它: background-position-y: 20px;，目的是：当checkbox 未选中的时候，让背景图片挪到一个我们看不见的地方去，当checkbox 选中的时候，让背景图片再挪回来，也就是重置为0：background-position-y: 0px;，剩下的就是给它一个过渡效果，用户体验就更好啦，最后这样就达到我们的目的啦，具体代码如下：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox美化</title>
</head>
<style type="text/css">
#remember-password-container {
width: 80px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin:-12px 0 0 -40px ;
text-align: center;
}
#remember-password-container .remember-password-content {
position: relative;
}
#remember-password-container input[type=checkbox]{
width: 16px;
height: 16px;
position: absolute;
opacity: 0;
cursor: pointer;
z-index: 2;
font-size: initial;
}
#remember-password-container .remember-me-label {
color: #000;
margin-left: 25px;
cursor: pointer;
}
#remember-password-container .remember-me-label::selection{
background: rgba(0,0,0,0);
}
#remember-password-container span {
position: absolute;
top: 4px;
width: 14px;
height: 14px;
border: 1px solid #d6d6d6;
border-radius: 3px;
background: url(img/fork_green.png);
background-size: 14px;
background-repeat: no-repeat;
background-position-x: 0px;
background-position-y: 20px;
-webkit-transition: background-position-y 0.1s linear;
-o-transition: background-position-y 0.1s linear;
transition: background-position-y 0.1s linear;
}
#remember-password-container input[type=checkbox]:checked+span {
background-position-y: 0px;
}
</style>
<body>
<div id="remember-password-container">
<div class="remember-password-content">
<input type="checkbox" id="remember-me-checkbox">
<span></span>
<label class="remember-me-label" for="remember-me-checkbox">记住我 </label>
</div>
</div>
</body>
</html>
5. jquery 用背景图片代替默认复选框样式完成点击和全选
<img src="全选图片" src1="反选图片" />
$("img").bind("click",function(){
var url=$(this).attr("src");
$(this).attr("src","src1");
$(this).attr("src1",url);
});
就这样。。。如果要背景图片的话同理。。。不过要把attr改为css~
6. android checkbox背景图片缩放问题
itmap icon = null;//原始图片
int width = icon.getWidth(), height = icon.getHeight();
float scaleRate = 0.8f;//缩小的比例
while(width >= 300 || width >= 300) {
Matrix matrix = new Matrix();
matrix.postScale(width * scaleRate, height * scaleRate);
// 得到新的图片
Bitmap newIcon = Bitmap.createBitmap(icon, 0, 0, width, height, matrix, true);
icon.recycle();
icon = newIcon;
width = icon.getWidth(), height = icon.getHeight();
}int width = icon.getWidth(), height = icon.getHeight();
if(width > 300 || width > 300) {
float scaleRate = width > height ? 300 / width : 300 / height;
Matrix matrix = new Matrix();
matrix.postScale(width * scaleRate, height * scaleRate);
// 得到新的图片
Bitmap newIcon = Bitmap.createBitmap(icon, 0, 0, width, height, matrix, true);
icon.recycle();
icon = newIcon;
}
7. Flex 修改控件皮肤时，想给checkbox添加个背景图片，路径正确不知道为啥还报无法解析图片的问题
应该是/assets/1.png的
8. QT中 checkBox怎么设置样式表，使我选中时，背景图片改变
protected void Page_Load(object sender, EventArgs e)
{
CheckBox chk = new CheckBox();
chk.Text = "testall"; // 这里可以换成数据库的内容
chk.CheckedChanged += new EventHandler(chk_CheckedChanged);
chk.AutoPostBack = true;
Page.Form.Controls.Add(chk);
for (int i = 0; i < 10; i++)
{
CheckBox chk2 = new CheckBox();
chk2.Text = "test" + i.ToString(); // 这里可以换成数据库的内容
chk2.Checked = (i % 3 == 0); // 这里可以换成数据库的内容
Page.Form.Controls.Add(chk2);
}
}
void chk_CheckedChanged(object sender, EventArgs e)
{
CheckBox all = sender as CheckBox;
foreach(Control ctl in Page.Form.Controls)
{
if (ctl is CheckBox)
{
CheckBox chk = ctl as CheckBox;
chk.Checked = all.Checked;
}
}
}
9. 单选按钮切换输入框背景图片
指定你的输入框的id名，如id=ipt
给你的“快递单”按钮加个触发事件：onclick="ipt.style.background=url('1.gif')"
同样给你的“物流单”按钮加个触发事件：onclick="ipt.style.background=url('2.gif')"
试试