html+css修改单选框样式

撰写于 2012年3月23日 | 分类 :美丽前端 | html+css修改单选框样式有4条评论

 

在网上接了一个单,要求修改单选框的样式。

以前做过这个东西,可惜当时代码也没有保存。

忘记了怎么整,今天晚上查了查资料。

先给个演示地址,

Demo:html+css修改单选框样式

整好了。留着。

不过这里有两个重要的发现,以前想琢磨但是没有去研究的。

标记一下。

 

标签不写onclick,但是当单击的时候有能触发一个函数

需要在也见面加载的时候

window.onload=function()
 document.getElementById("bnt").onclick=function()
{
  alert("这是一个按钮");
}

这样就能在单击id=bnt的标签时触发一个alert();

这个是效果:

html+css修改单选框样式

html+css修改单选框样式


还有一个就是关于TagName的使用

var labels =
document.getElementById("label_radio").getElementsByTagName("label");

这样取的就是id=label_radio这个元素下的所有label标签。

切记labels这个变量现在是一个数组。

取第一个label,就是labels[0]了

 

话不多说。代码贴出来:

找一张图片,1.gif作为单选按钮的背景就好了。

 

代码主要有3部分
这段css定义了两个class,用来表现选中和未选中状态:

label
     {
      display:-moz-inline-block;
      display:inline-block;
      cursor:pointer;
      margin:5px 0;
      padding-left:20px;
      line-height:15px;
      background:url('./1.gif') no-repeat left top;
     }
     .label_checked{
      background:url('./1.gif') no-repeat left bottom;
     }
     #radio_id_1,#radio_id_2{display:none;}

这段javascript用来控制选中,并改变label的样式

window.onload = function()
    {
       var labels =
    document.getElementById("label_radio").getElementsByTagName("label");
       var radios =
    document.getElementById("label_radio").getElementsByTagName("input");
       for(var i=0;i<labels.length;i++)
       {
           labels[i].onclick=function()
           {
               if(this.className=="")
               {
                    for(var j=0;j<labels.length;j++)
                    {
                       labels[j].className = "";
                       radios[j].checked = false;
                    }
                         this.className='label_checked';
                    try{
                          document.getElementById(this.name).checked = true;
                   } catch (e) {}
               }
           }
       }
    }

最后就是这段html。这段html也就input和label重要些。label的for对应input radio的 id。

    <div id="label_radio">
      <label for="radio_id_1" name="radio_id_1" class="label_checked"/>Money</label>
      <input type="radio" id="radio_id_1" name="you_select" checked="true"value="Money"/>
      <label for="radio_id_2" name="radio_id_2" class=""/>Car</label>
      <input type="radio" id="radio_id_2" name="you_select" value="Car"/>
    </div>

这儿有打包一个压缩包,可下载下去放www目录测试一下。是PHP的,把那段php的代码删掉,然后把后缀改成.html。也能直接运行
点击下载html+css修改单选框样式http://pan.baidu.com/s/1bn9zBGz

评论 4

  1. css 回复
    15/03/23

    IE6.0 测试不行。

    • 15/03/24

      还用IE6 呢?直接都放弃了这玩意儿啊,不管用户了。哈哈

  2. css 回复
    15/03/23

    chrome测试通过

    • 15/03/24

      还考虑IE6呢?都直接放弃了IE6了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*