無法在CSS中設計複選框

我有一些複選框列表，我試圖自定義設計。但我的編碼不起作用。這裏是我的示例代碼：無法在CSS中設計複選框

我的CSS是：

input[type="checkbox"]{ 
display:none; 
} 
input[type="checkbox"] + span{ 
width:15px; 
height:15px; 
background:url(../img/uncheck_box.png) no-repeat; 
display:inline-block; 
} 
input[type="checkbox"]:checked + span{ 
background:url(../img/check_box.png) no-repeat; 
}

我的HTML是：

<input type="checkbox" id="1" /><span></span><label for="1">AAAA</label><br /> 
<input type="checkbox" id="2" /><span></span><label for="2">BBBB</label><br /> 
<input type="checkbox" id="3" /><span></span><label for="3">CCCC</label><br /> 
<input type="checkbox" id="4" /><span></span><label for="4">DDDD</label><br /> 
<input type="checkbox" id="5" /><span></span><label for="5">EEEE</label><br /> 
<input type="checkbox" id="6" /><span></span><label for="6">FFFF</label>

來源

2013-03-21 Rajesh

如果您需要跨瀏覽器解決方案，複選框很難自定義CSS。你也應該考慮一個JavaScript的替代品。 – 2013-03-21 11:27:37

可能的重複[如何使用CSS樣式複選框？]（http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css） – Quentin 2013-03-21 11:31:09

一個很好的教程做這個http：// lea .verou.me/2013/03/ios-6-switch-style-checkbox-with-pure-css/ – 2013-03-21 11:31:25

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Button - Checkboxes</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
$("#check").button(); 
$("#format").buttonset(); 
}); 
</script> 
<style> 
#format { margin-top: 2em; } 
</style> 
</head> 
<body> 
<input type="checkbox" id="check" /><label for="check">Toggle</label> 
<div id="format"> 
<input type="checkbox" id="check1" /><label for="check1">B</label> 
<input type="checkbox" id="check2" /><label for="check2">I</label> 
<input type="checkbox" id="check3" /><label for="check3">U</label> 
</div> 
</body> 
</html>

我認爲你需要這個：這是最好的鍛鍊。

來源

2013-03-21 11:44:51 Napster

你也可以參考這個鏈接：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ – Napster 2013-03-21 11:48:12

CSS3複選框，收音機[鏈接這裏]（http://cssdeck.com/labs/css-複選框的樣式） – Nandhakumar 2013-03-21 12:17:22

無法在CSS中設計複選框

回答

相關問題