Question

我有以下复选框，我需要在checkBox时选中 V 的颜色为绿色，我应该怎么做？

<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>

Answer 1

更新 *

我编辑FIDDLE，这就是你需要的（启用=绿色并禁用它）：

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

启用后更改复选框颜色

1 个答案: