有時需要在view頁面設定標簽的狀態為disabled，但是客戶反映radio button和checkbox的顏色很淺，難以識別，尤其是列印后，如下：
可以使用下面的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 ;
}
}
效果
原路徑：https://www.cnblogs.com/AdamLee/p/16750135.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510928.html
標籤：Html/Css
上一篇：前端ES6 面試過關寶典
下一篇：CDN