css - 在禁用的复选框上使用什么选择器来更改相应标签的伪元素？

Question

我制作了一个复选框，通过 clip: rect(0 0 0 0) 使其不可见，并设置了该复选框标签的样式。我用了

input[type="checkbox"] + label:before 选择器

设置自定义复选框的样式和

input[type="checkbox"] + label:after 选择器

设置自定义“选中”标志的样式。

我在一个页面上有多个复选框，它们会动态地将自己更改为禁用，但不会隐藏(因为我希望用户看到可用的选项)。

但是，如果我通过 disabled="disabled" 禁用复选框，它仍然可以点击。我成功地更改了 label 的颜色和 label:before 元素的颜色。

但是:

如果我点击禁用的复选框(或标签，更准确地说)，只要我按住鼠标键，就会出现不同的颜色(在我的例子中:黑色)——但只是针对 label:before-元素。

下面是更密集的代码:

input[type="checkbox"]
{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
    input[type="checkbox"] + label
    {
        position: relative;
        top:-1px;
        padding: 0px;
        padding-left: 1.5em;
        vertical-align: middle;
        -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
        input[type="checkbox"] + label:before
        {
            content: '';
            color: #F00;
            position: absolute;
            top: 50%;
            left: 0;
            width: 14px;
            height: 14px;
            margin-top: -9px;
            border: 2px solid #006c39;
            border-radius:4px;
            text-align: center;
        }
        input[type="checkbox"] + label:after
        {
            content: '';
            background-color: #900;
            position: absolute;
            top: 50%;
            left: 4px;
            width: 10px;
            height: 10px;
            margin-top: -5px;
            -webkit-transform: scale(0);
              -ms-transform: scale(0);
                  transform: scale(0);
            -webkit-transform-origin: 50%;
              -ms-transform-origin: 50%;
                  transform-origin: 50%;
            -webkit-transition: -webkit-transform 200ms ease-out;
                  transition: transform 200ms ease-out;
        }

        input[type="checkbox"] + label:after
        {
            background-color: transparent;
            top: 50%;
            left: 4px;
            width: 8px;
            height: 3px;
            margin-top: -4px;
            border-style: solid;
            border-color: rgb(75,177,49);
            border-width: 0 0 3px 3px;
            -webkit-border-image: none;
               -o-border-image: none;
                  border-image: none;
            -webkit-transform: rotate(-45deg) scale(0);
              -ms-transform: rotate(-45deg) scale(0);
                  transform: rotate(-45deg) scale(0);
            -webkit-transition: none;
                  transition: none;
        }
    input[type="checkbox"]:checked + label:after
    {
        content: '';
        -webkit-transform: rotate(-45deg) scale(1);
          -ms-transform: rotate(-45deg) scale(1);
              transform: rotate(-45deg) scale(1);
        -webkit-transition: -webkit-transform 200ms ease-out;
              transition: transform 200ms ease-out;
    }

代码基于 maddesigns.de 上的一篇文章(德语):

http://maddesigns.de/individuelle-checkbox-radio-inputs-1396.html

禁用复选框的代码:

input[type="checkbox"].inactive + label,
input[type="checkbox"].inactive:focus + label,
input[type="checkbox"].inactive:hover + label,
input[type="checkbox"].inactive:active + label
        {
            color:#999;
            border-color:#999;
        }
input[type="checkbox"].inactive + label::before,
input[type="checkbox"].inactive:focus + label::before,
input[type="checkbox"].inactive:hover + label::before,
input[type="checkbox"].inactive:active + label::before
            {
                border-color:#999;
                color:#999;
            }

我已经将 .inactive 类添加到所有禁用的复选框中，所以我不必通过选择输入[type="checkbox"]:disabled:active + label::before以及类似的东西。

那么，有什么建议吗？如何可以更改鼠标按下时禁用复选框的 label:before 的颜色？

编辑:

Effect 出现在 FireFox、Chrome、Opera 和 Android Webkit 中。

该效果不会显示在 IE11、Safari (IOS) 和 fiddle 中.

提前致谢。

Answer 1

在不同的 css 文件(仍然适用)中，我发现了以下样式:

input[type="checkbox"]:active + label:before
{
    -webkit-transition-duration: 0;
          transition-duration: 0;
    -webkit-filter: brightness(0.2);
          filter: brightness(0.2);
}

如果滤镜滤除所有颜色，我可以整天改变颜色而没有任何效果。

现在它工作正常 - 应该如此。