样式复选框和单选按钮

问题描述：

我想为选中的复选框使用未选中复选框的图像和其他图像。我不想添加标签，类或类似的东西。我想单独保留HTML，只显示<input type="checkbox" />我不介意使用JavaScript或jQuery，只要我可以单独保留HTML。这是我正在寻找的一个例子，但它只适用于Webkit浏览器。 http://jsfiddle.net/7kScn/ 如果不添加标签或类或ID，是否会有解决方案？样式复选框和单选按钮

你不介意的JavaScript附加类的页面加载后，所以HTML代码仍然在源裸？ – 2011-12-16 19:49:50

@SetSailMedia我正在考虑它，但我也希望它成为更有机因此它覆盖每一个复选框，单选按钮... – henryaaron 2011-12-16 19:58:54

答

不幸的是，我必须一直没明确的，是的，有使用jQuery，CSS（X）HTML和其他方法可以做的非常灵活和漂亮的事情......但实质上，他们将input转换为div。也很难找到有利于选择下拉菜单的东西。我最终找到了这个选择框，我将尝试看看我是否可以为复选框和单选按钮做类似的事情。 http://bavotasan.com/2011/style-select-box-using-only-css/

我只是发现了一些完善。 http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/ 虽然颜色和字体很丑，但它完成了我需要的东西，再加上那些很容易改变。

答

这看起来像一个有趣的选择，尽管它似乎只是处于测试阶段：

http://widowmaker.kiev.ua/checkbox/

答

乐趣周五的挑战，这是我有点哈克实施。请记住，一个真正的应用程序，你必须有更好的输入型的定位和更稳健的选择：

的jsfiddle： http://jsfiddle.net/2RNVh/

$("input").each(function() { 
    var $this = $(this); 
    $this.hide(); 

    var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);  

    $image.bind("click", function() { 
     var $checkbox = $(this).prev("input"); 
     $checkbox.prop("checked", !$checkbox.prop("checked"));  
     checkImage(); 
    }) 

    function checkImage() { 
     if($image.prev("input").prop("checked")) { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png"); 
     } else { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png"); 
     } 
    } 

});

答

它可能有助于去jquery UI

复选框例如。 http://jqueryui.com/button/#checkbox

电台如。 http://jqueryui.com/button/#radio

GL HF

样式复选框和单选按钮

相关推荐