IE7 +的复选框/ radiobox风格

Question

我讨厌IE7，它让我生病了。我需要帮助，可能是我做错了或者......

这是我的css：

input[type='checkbox'] 
{
    opacity: 0;
    float: left;
    width: 18px;
}
input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    /* Make look clickable because they are */
    cursor: pointer;
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}

input[type='checkbox']:checked + label {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);

HTML：

<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked">
<label class="choice" for="Field2">First Choice</label>
<br><br>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox">
<label class="choice" for="Field3">Second Choice</label>
<br><br>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox">
<label class="choice" for="Field4">Third Choice</label></body>

IE9观点：

IE7＆amp; IE8

我发现有人说应该使用“selectivizr.js”更详细的儿子这个网站“http://selectivizr.com/”

我按照他们的指示做了：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

这没有解决问题。

如果有人想尝试，我创造了这个小提琴！ http://jsfiddle.net/6mUWk/

Answer 1

IE支持版本 9 的:checked伪类。使用JavaScript跟踪检查字段的状态并将样式应用于常规类。

或者，仅在IE9 +中使用自定义表单控件，而在旧IE7 / 8中使用常规表单控件。例如，可以使用conditional comments来实现IE版本的这种分离。

Answer 2

感谢所有尝试！

然而，到目前为止，我认为最好的解决方案只是在jQuery的帮助下：

https://code.google.com/p/jquery-checkbox/

简单而干净!!!

我测试了它，它支持我需要的所有浏览器！

Answer 3

凯文的评论是正确的。 SELECT，RADIO和CHECKBOX的行为与标准HTML元素不同，而且与平台相关。 XP上的Checkbox与Win7或MACOS上的Checkbox不同。

您可能需要考虑使用隐藏的表单字段并使用基于JavaScript的替换来完成您想要的操作。

基于：jquery select checkbox by div

$(function() {
     $('.someWrapper').toggle(
       function(event) {
         $(this).find('input').prop('checked', true);
       },
       function(event) {
         $(this).find('input').prop('checked', false);
       }
     );
 });