更改checkbox效果

checkbox的默认被选中效果是在框里画了个钩,我想用JS把它改成一个全黑的框,有什么办法?

解决方案 »

  1.   

    用2张图片，勾选和未勾选
    将checkbox样式 style="filter:alpha(opacity=0);opacity:0"
      

  2.   

    IE 下可以这么玩，FF 下不行，可以考虑用 div 遮罩实现L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
      <input type="checkbox" id="iptChk1" />
      <input type="checkbox" id="iptChk2" />
      <script type="text/javascript">
      <!--
    var chk = document.getElementById("iptChk1");
    chk.onclick = function() {
    if (this.checked)
    {
    this.style.border = "solid 10px black";
    }
    else
    {
    this.style.border = "solid 0px black";
    }
    };
      //-->
      </script>
     </body>
    </html>
      

  3.   

    不错,呵呵
    能不能让黑框的大小和checkbox内框大小一样?给人的感觉就像把框内涂成了黑色
      

  4.   


    IE 7 下可以达到 lz 要求，FF 行不通！
    不过 margin-top 居然是 -22px 才能达到效果，太诡异了！写着玩吧！L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
    <div style="width: 12px; height: 12px; border: solid 0px red; overflow: hidden; margin-bottom: 5px;">
    <input type="checkbox" id="iptChk1" style="margin: -22px 0px 0px -4px;" />
    </div>
    <div style="width: 12px; height: 12px; border: solid 0px red; overflow: hidden; margin-bottom: 5px;">
    <input type="checkbox" id="iptChk2" style="margin: -22px 0px 0px -4px;" />
    </div>
      <script type="text/javascript">
      <!--
    var chk = document.getElementById("iptChk1");
    chk.onclick = function() {
    if (this.checked)
    {
    this.style.border = "solid 10px black";
    }
    else
    {
    this.style.border = "solid 0px black";
    }
    };
      //-->
      </script>
     </body>
    </html>