设置Radio button 和Checkbox 在disabled 状态的样式

有时需要在view页面设置标签的状态为disabled，但是客户反映radio button和checkbox的颜色很浅，难以识别，尤其是打印后，如下：

成都创新互联公司自2013年创立以来，先为天心等服务建站，天心等地企业，进行企业商务咨询服务。为天心企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

可以使用下面的css更改原有的样式input[type= "radio" ]:checked:disabled {

    appearance:  none ;
    margin :  0 ;
    font : inherit;
    color :  #6D6D6D ;
    width :  1.15em ;
    height :  1.15em ;
    border :  1px #6D6D6D solid ;
    border-radius:  50% ;
    transform: translateY( -0.075em );
}
    input[type= "radio" ]:checked:disabled::before {
        content :  "●" ;
        font-size :  17px ;
        font-weight :  bolder ;
        position :  absolute ;
        top :  -7.24px ;
        left :  0.2px ;
        width :  16px ;
        height :  16px ;
    }

input[type= "checkbox" ]:checked:disabled {
    appearance:  none ;
    margin :  0 ;
    font : inherit;
    color :  #6D6D6D ;
    width :  1.15em ;
    height :  1.15em ;
    border :  1px #6D6D6D solid ;
    transform: translateY( -0.075em );
}
    input[type= "checkbox" ]:checked:disabled::before {
        content :  "x" ;
        font-weight :  bolder ;
        position :  absolute ;
        left :  1.5px ;
        top :  -2.6px ;
        width :  16px ;
        height :  16px ;
    }

/*Firefox css*/
@-moz-document url-prefix() {
    input[type= "radio" ]:checked:disabled::before {
        top :  -7.5px ;
        left :  -0.2px ;
    }

    input[type= "checkbox" ]:checked:disabled::before {
        left :  1px ;
    }
}

文章题目：设置Radio button 和Checkbox 在disabled 状态的样式
URL分享：https://www.cdcxhl.com/article26/dsojscg.html

成都网站建设公司_创新互联，为您提供微信小程序、商城网站、网页设计公司、软件开发、面包屑导航、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联