为无线电按钮添加无效的CSS类

Question

我正在为一个无线电按钮创建我自己的css，但是我有一个无效状态的问题。下面是我的scss的整个无线电按钮，所有的状态，如checked和disabled。我想把它添加到它的类中，这将描述当它被宣布为无效时，无线电按钮应该是怎样的样子。

我的代码：

@mixin radioStyle($borderSize,
    $borderColor, 
    $dotColor,
    $focusColor,
    $insideRadioColor,
    $borderRadius,
    $transition,
    $width:1.125rem,
    $height:1.125rem,) {
      .radiobutton {
        input[type="radio"] {
          + .radiobutton__label  {
            &:before {
              height: $height;
              width: $width;
              border-radius: $borderRadius;
              border:  $borderSize solid $borderColor;
              transition: $transition;
            }
          }
            &:checked {
                + .radiobutton__label  {
                  &:before {
                    background-color: $dotColor;
                    box-shadow: inset 0 0 0 2px $insideRadioColor;
                  }
                }
              } 
              
            &:disabled {
                + .radiobutton__label  {
                  &:before {
                    box-shadow: inset 0 0 0 4px $insideRadioColor;
                  }
                }
              }
            &:focus {
                + .radiobutton__label  {
                  &:before {
                    outline: none;
                    border-color: $focusColor;
                        }
                      }
                    }
                      
                  }
                }
              }
.radiobutton {
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    + .radiobutton__label  {
      &:before {
        content: '';
        margin-right: 0.5em; 
        vertical-align: top;
        vertical-align: text-bottom;
        cursor: pointer;
        display: inline-flex;
      }
    }
    &:focus {
      + .radiobutton__label  {
        &:before {
          outline: none;
        }
      }
    }
    + .radiobutton__label  {
      &:empty {
        &:before {
        }
      }
    }
    +.radiobutton__label +.invalid {
        &:before {
          border-color: red;
        }
      
    }
  }
 
  input:disabled+label {
      opacity: .3;
    }
}
@include radioStyle(2px, $cytiva-color-shade-gray-1,
 $cytiva-color-primary-green,
  $cytiva-color-secondary-lightblue,
  $cytiva-color-primary-white,
  100%,all 250ms ease);

我想添加生成.invalid的类border-color: red。有人知道怎么加吗？

我的html：

<div class="radiobutton">
  <input id="radio-1" name="radiobutton" type="radio" checked>
  <label for="radio-1" class="radiobutton__label ">Checked</label>
</div>
<div class="radiobutton">
  <input id="radio-2" name="radiobutton" type="radio">
  <label  for="radio-2" class="radiobutton__label ">Unchecked</label>
</div>
<div class="radiobutton">
  <input id="radio-3" name="radiobutton" type="radio" disabled>
  <label for="radio-3" class="radiobutton__label ">Disabled</label>
</div>
<div class="radiobutton">
  <input id="radio-2" name="radiobutton" type="radio" >
  <label  for="radio-2" class="radiobutton__label invalid">Invalid</label>
</div>

Answer 1

您可以通过这个选择器来完成它：

input:invalid ~ .radiobutton__label:before {
  background: red;
}

它选择无效输入的下一个同级的前一个元素。您可以在这个码页中查看它。我给了按钮属性required和一个value="null"来模拟无效状态。

更新：我的例子是背景色。为了更新边框颜色，您必须得到更具体的。选择器应该如下所示：

input[type="radio"]:invalid ~ .radiobutton__label:before {
  border-color: red;
}

我还更新了码页。