Question

我有一个复选框，需要针对不同条件使用不同的自定义样式。我可以使用以下CSS自定义复选框

.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.1rem !important;
    left: -2rem !important;
    width: 2rem !important;
    height: 2rem !important;
    overflow: hidden;
    border: none;
    background-color: $buttonBack;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
    line-height: 2rem;
    padding-left: 10px;
    font-size: 14px !important;

}

.custom-control-label:before{
    background: rgba(24, 68, 119, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
  }
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:$evcCardLightBlue !important;
    box-shadow: none !important;
  }

我的复选框代码如下实现

 <div class="custom-control custom-checkbox my-1 pl-0">
   <input type="checkbox" name="vehicle2"
     checked={stationIdArray.length !== 0 && groupIdArray && groupIdArray.some(e => e.groupIdz.groupId === groupId)}
     onClick={() => this.addEvcGroupToArray(item.stations.map((item, key) => {
      return (item.stationID)
     }), groupId)}
     className="custom-control-input"
     id={`'group'${item.groupId}`} />
     <label className="custom-control-label"
      for={`'group'${item.groupId}`}></label>
</div>

目前，我为此复选框提供的颜色是蓝色。在某些情况下，我需要将其更改为红色。我怎样才能做到这一点？如您所见，我的ID也是动态的，因此无法在CSS中使用。

更改CSS中的复选框样式

0 个答案: