html checkbox样式美化

最新推荐文章于 2025-06-13 11:13:44 发布

转载最新推荐文章于 2025-06-13 11:13:44 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/u-drive/p/7888155.html

本文介绍了一种使用CSS和背景图片来美化HTML中Checkbox的方法。通过隐藏原始的Checkbox并利用span元素及CSS控制其样式变化，实现了美观的Checkbox选择效果。

思路：使用label结合checkbox，背景图片进行美化。

原理：

　　1. for 属性规定 label 与哪个表单元素绑定，显式绑定和隐式绑定,均可实现checkbox的选用与取消效果，具体见：<label> 标签的 for 属性　　　　

编码实现：

这里我们通过隐藏默认的checkbox,添加一个行内元素span并控制span在checkbox不同状态下的样式即可。

1.html:

<label class="my_protocol">
      <input class="input_agreement_protocol" type="checkbox" />
      <span></span>
</label>

2. css:

　　　/*隐藏掉我们模型的checkbox*/
    .my_protocol .input_agreement_protocol {
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                display: none;
            }
    /*未选中时*/        
   .my_protocol .input_agreement_protocol+span {
                width: 16px;
                height: 16px;
                background-color: red;
                display: inline-block;
                background: url(../../Images/TalentsRegister/icon_checkbox.png) no-repeat;
                background-position-x: 0px;
                background-position-y: -25px;
                position: relative;
                top: 3px;
            }
   /*选中checkbox时,修改背景图片的位置*/            
   .my_protocol .input_agreement_protocol:checked+span {
                background-position: 0 0px
            }