189 8069 5689

设置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 状态的样式
网站路径:http://cdxtjz.com/article/dsojscg.html

其他资讯