美文网首页
给radio、checkbox按钮重新做样式

给radio、checkbox按钮重新做样式

作者: 胖胖的胖胖二 | 来源:发表于2018-07-04 17:59 被阅读0次

    通常UI给出的按钮样式需要自己来写,如图


    单选按钮选中与未选中状态样式

    给的新样式一般都用选择器:before覆盖之前的样式,在此基础上再编写新的样式。

    radio样式编写借鉴了 自定义input[type="radio"]的样式这篇文章,写的很好,非常详细,大家可以看一下。

    checkbox是自己写的,css稍微有些不严谨,但效果实现了,稍微有一小点儿瑕疵,如果有更好更简单的方法,欢迎大家踊跃发言。

    1.首先将之前的样式抹掉,利用定位将默认的框覆盖住,一定要有背景颜色

    input[type='checkbox']:before{
        content: "";
        position: absolute;
        width: 17px;
        height: 17px;
        top: 2px;
        left: 78px;
        bottom: 0;
        background: #fff;
        box-sizing: border-box;
    }
    

    2.然后给checkbox新的样式

    input[type='checkbox']{
        width: 15px;
        height: 16px;
        border: 1px solid #e3e3e3;
        margin-left: 80px;
    }
    

    3.最后将选中状态的背景替换一下

     input[type='checkbox']:checked::before {
        width: 17px;
        height: 17px;
        background: url(../img/duigou.jpg) no-repeat center;
        border: none;
    }
    
    有两点需要注意:①background用到的图片背景颜色不能为透明,UI切图的时候我让她连边框一起切到一张图了;②步骤2的width加上外边框是16px,比设定的17px小,这是因为如果二者正好是17px的话会导致出现这种情况 image.png

    右侧边框处出现了默认checkbox的样式,所以需要步骤2的width宽度小一些,另外步骤1里的top,left值可能也需要微调,才能实现完美覆盖,如果单纯使用定位来覆盖,可能效果不太完美,这一点就稍微有点麻烦。

    相关文章

      网友评论

          本文标题:给radio、checkbox按钮重新做样式

          本文链接:https://www.haomeiwen.com/subject/vrzeuftx.html