使用css修改checkbox选择框的样式

二. 修改思路:

  • 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。

  • 然后使用绝对定位label标签覆盖到checkbox框上面,通过修改label标签达到修改checkbox框的目的。

三. 具体代码:

代码一:设置“√”为元素的内容,点击之后显示对勾
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #c07721;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: "√";       /*这里设置选中之后的显示内容*/
        width: 18px;
        height: 18px;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>
效果一:
使用css修改checkbox选择框的样式
代码二:设置背景图片,点击之后,显示背景图片
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #666666;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: " ";
        width: 18px;
        height: 18px;
        background: url("img/check.jpg") no-repeat;
        background-size: 100% auto;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>
效果二:
使用css修改checkbox选择框的样式
上一篇:【leetcode】Unique Paths II


下一篇:使用AppFabric 承载WCF和WF服务-实例分析和说明