当前位置:首页 > 前端技术 > CSS+checkbox 实现多选按钮 多选标签

CSS+checkbox 实现多选按钮 多选标签

2022年11月06日 16:22:30前端技术24

效果图:

       CSS+checkbox 实现多选按钮  多选标签 _ JavaClub全栈架构师技术笔记

CSS:

input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    input[type='checkbox'] + label {
        display: block;
        height: 30px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.428571429;
        /*color: #009aff;*/
        border: 1px solid #ccc;
        text-align: center;
        float: left;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 2px;
    }

     input[type='checkbox']:checked + label {
        /*border: 1px solid #009aff;*/
         background-color: #4dc63c;
         color: #fff;
         border-radius: 2px;
         font-weight: 500;
    }

jsp:

 <c:forEach items="${serve}" var="s">
       <input id="d${s.id}" type="checkbox" data-type="welfare" name="reason">
       <label for="d${s.id}">${s.name}</label>
   </c:forEach>

说明:

${serve}是后台返回的对象集合

作者:一个很酷的人
来源链接:https://blog.csdn.net/Hi_Boy_/article/details/82791730

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68163.html

标签: css标签
分享给朋友: