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')"
試試