CSS 多选框样式

死猪佩奇@

已于 2024-01-04 11:55:28 修改

阅读量212

点赞数 1

分类专栏：前端文章标签： css html 前端

于 2019-10-12 15:46:45 首次发布

本文链接：https://blog.csdn.net/YouShuihe/article/details/102521780

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
前端代码：

 		<span style="font-size: 16px;">会议设备：</span>
        <div class="mui-checkbox-con">
            <label>
                <input class="mui-checkbox checkbox-s checkbox-green" id="tq" type="checkbox"
                    value="1" /><span style="position: relative; bottom: 5px;">台签</span></label>
            <label>
                <input class="mui-checkbox checkbox-s checkbox-orange" id="cs" type="checkbox"
                    value="2" /><span style="position: relative; bottom: 5px;">茶水</span></label>
            <label>
                <input class="mui-checkbox checkbox-s checkbox-blur" id="tyy" type="checkbox"
                    value="3" /><span style="position: relative; bottom: 5px;">投影仪</span></label>
            <label>
                <input class="mui-checkbox checkbox-s checkbox-red" id="hb" type="checkbox"
                    value="4" /><span style="position: relative; bottom: 5px;">会标</span></label>
            <label>
                <input class="mui-checkbox checkbox-s checkbox-qin" id="ht" type="checkbox"
                    value="5" /><span style="position: relative; bottom: 5px;">话筒</span></label>
            <label>
                <input class="mui-checkbox checkbox-s checkbox-zi" id="qt" type="checkbox"
                    value="6" /><span style="position: relative; bottom: 5px;">其他</span></label>
        </div>

css代码：

 		.mui-checkbox-con
        {
            margin-top: 3px;
            font-size: 16px;
        }
        .mui-checkbox-con label
        {
            display: inline-block;
        }
        .mui-checkbox
        {
            position: relative;
            width: 23px;
            height: 23px;
            margin-right: 10px;
            background-color: #FFFFFF;
            border: solid 1px #d9d9d9;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            background-clip: padding-box;
            display: inline-block;
            -webkit-appearance: none;
        }
        .mui-checkbox:focus
        {
            outline: 0 none;
            outline-offset: -2px;
        }
        .mui-checkbox:checked
        {
            background-color: #18b4ed;
            border: solid 1px #FFFFFF;
        }
        
        .mui-checkbox:disabled
        {
            background-color: #d9d9d9;
            border: solid 1px #d9d9d9;
        }
        
        .mui-checkbox.checkbox-green:checked
        {
            background-color: #5cb85c;
        }
        .mui-checkbox.checkbox-orange:checked
        {
            background-color: #f0ad4e;
        }
        .mui-checkbox.checkbox-blur:checked
        {
            background-color: #18b4ed;
        }
        .mui-checkbox.checkbox-red:checked
        {
            background-color: #fb80a9;
        }
        .mui-checkbox.checkbox-qin:checked
        {
            background-color: #40d6cd;
        }
        .mui-checkbox.checkbox-zi:checked
        {
            background-color: #697ae4;
        }