使用css修改checkbox选择框的样式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使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>
效果一:
img_1d89f7bf7727551bfe84344a7c007898.gif
代码二:设置背景图片,点击之后,显示背景图片
// 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>
效果二:
img_8e4f9786568e4952a3df2efc5cde3f45.gif

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章