最新消息:欢迎访问小松个人博客,博客已经启用lua+redis防火墙功能,请不用用阿里云ISP机子访问博客

checkbox 自定义样式

前端技术 87浏览 0评论

在写样式的时候写了自定义样式的checkbox,当中没有事图片加js的方式,都是使用了css样式定义,第版本的游览器就不支持了

checkbox自定义样式1

代码

<style>
    label {
        display: inline;
    }

    .regular-checkbox {
        display: none;
    }

    .regular-checkbox + label {
        background-color: #fffff;
        border: 1px solid #259656;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
        padding: 7px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
    }

    .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    .regular-checkbox:checked + label {
        background-color: #259656;
        border: 1px solid #259656;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -12px 10px -12px rgba(0,0,0,0.05), inset 12px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }

    .regular-checkbox:checked + label:after {
        content: '\2714';
        font-size: 12px;
        position: absolute;
        top: -1px;
        left: 2px;
        color: #ffffff;
    }
</style>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

效果

checkbox

checkbox自定义样式2

看着像radio(单选按钮)的样式,其实是checkbox定义的

<style>
    .checkboxCircular {
        display: none;
    }
    .checkboxCircular + label {
        border-radius: 1000px;
        display: inline-block;
        margin-right: 5px;
        color: #FFF;
        font-size: 1.7em;
        content: ' ';
        border-radius: 100px;
        width: 11px;
        position: relative;
        height: 11px;

        border:1px solid #259656;
    }
    .checkboxCircular + label:before {
        content: ' ';
        border-radius: 100px;
        width: 5px;
        position: relative;
        top: -1px;
        right: 1px;
        /*z-index: 999;*/
        box-shadow: inset 0px 16px 40px #FFF;
        height: 5px;
        display: none;
        border:4px solid #259656;
    }

    .checkboxCircular:checked + label:before {
        display: block;
    }

</style>
<input type="checkbox" id="checkbox_b1" class="checkboxCircular" /><label for="checkbox_b1"></label><label for="">小松博客</label>
<input type="checkbox" id="checkbox_b2" class="checkboxCircular" /><label for="checkbox_b2"></label><label for="">php博客</label>

效果

checkbox

QQ交流群:136351212(满) 455721967

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» checkbox 自定义样式
本文链接地址:https://www.phpsong.com/3107.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!