Question

我已经创建了一个复选框，通过clip: rect(0 0 0 0)使其不可见，并设置了该复选框的标签。

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

设置自定义复选框和

的样式

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

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

我在页面上有多个复选框，可以动态更改自身以禁用，但不会隐藏（因为我希望用户看到可用的选项）。

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

BUT：

如果我点击禁用的复选框（或标签，为了更准确），只要我按下鼠标键，就会显示不同的颜色（在我的情况下：黑色） - 但仅适用于{{1 }} - 。元素

以下代码更加缺乏：

label:before

基于maddesigns.de上的文章的代码（德语）：

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

禁用复选框的代码：

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

我已将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; }类添加到所有已禁用的复选框，因此我不必选择via .inactive 和喜欢它。

那么，任何建议，如何可以改变mousedown上禁用复选框的input[type="checkbox"]:disabled:active + label::before的颜色？

修改

效果出现在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);
}

如果过滤器排出所有颜色，我可以整天改变颜色，但没有效果。

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

在禁用的复选框上使用哪个选择器来更改相应标签的伪元素？

1 个答案: