html - html更改复选框启用时的颜色

  显示原文与译文双语对照的内容

如果复选框是绿色,我需要用绿色checked绿色的颜色,我应该怎样做?


<input type="checkbox" checked="checked" disabled="disabled"/>



这个工作不正常


<style type="text/css">


 input[type=checkbox], input[type=file] {


 display: inline-block;


 margin-right: 15px;


 }


 input[type="checkbox"]:disabled:checked + label::after {


 border: 3px solid #228B22;


 border-top: none;


 border-right: none;


 }



 input[type="checkbox"]:checked + label::after {


 content: '';


 position: absolute;


 width: 1.2ex;


 height: 0.4ex;


 background: rgba(0, 0, 0, 0);


 top: 0.9ex;


 left: 0.4ex;


 border: 3px solid #1062a4;


 border-top: none;


 border-right: none;


 -webkit-transform: rotate(-45deg);


 -moz-transform: rotate(-45deg);


 -o-transform: rotate(-45deg);


 -ms-transform: rotate(-45deg);


 transform: rotate(-45deg);


 }


</style>



时间: 原作者:

更新 *

我编辑小提琴,这就是你需要的( 启用= 绿色并禁用它):


input[type="checkbox"]:disabled:checked + label::after {


 border: 3px solid #228B22;


 border-top: none;


 border-right: none;


}



input[type="checkbox"]:checked + label::after {


 content: '';


 position: absolute;


 width: 1.2ex;


 height: 0.4ex;


 background: rgba(0, 0, 0, 0);


 top: 0.9ex;


 left: 0.4ex;


 border: 3px solid #1062a4;


 border-top: none;


 border-right: none;


 -webkit-transform: rotate(-45deg);


 -moz-transform: rotate(-45deg);


 -o-transform: rotate(-45deg);


 -ms-transform: rotate(-45deg);


 transform: rotate(-45deg);


}



FIDDLE

...