深圳幻海软件技术有限公司 欢迎您!

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

2023-03-02

 有时需要在view页面设置标签的状态为disabled,但是客户反映radiobutton和checkbox的颜色很浅,难以识别,尤其是打印后,如下:  可以使用下面的css更改原有的样式input[type="radio"]:checked:disabled{?12

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

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<em id="__mceDel">    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 ;
    }
<br>/*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 ;
    }
}</em>

  

效果

 

原路径:https://www.cnblogs.com/AdamLee/p/16750135.html