html - CSS 检查状态 - 选中状态下的目标 svg

Question

我正在使用我用 SVG 创建的自定义 bootstrap 4 复选框作为图标，我试图在事件状态下更改图标的颜色，我正在努力尝试定位它并更改它。到目前为止我的代码是:

input[type="checkbox"]:checked+label {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  border: 1px solid $blue;
  color: $blue!important;
  font-weight: bold;
}

.select-option {
  height: 86px;
  width: 100%;
  border: 1px solid $light-grey;
  text-align: center;
  vertical-align: middle;
  font-family: $main-font;
  color: $grey;
  font-size: 14px;
  padding-top: 7px;
  border-radius: 3px;
}

.select-option:hover {
  border: 1px solid $blue;
}

.select-option:hover {
  color: $blue;
}

.select-option:hover path {
  fill: $blue;
}

.product-icon {
  width: 50px;
  height: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<input type="checkbox" name="warranty" class="sr-only" id="warranty">
<label for="warranty" class="select-option">
    <svg viewBox="0 0 60 40" class="product-icon">
        <path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.8813989 3.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" id="Path-1" stroke-width="4" fill="none" stroke="orange" stroke-dasharray="270" stroke-dashoffset="-270"></path>
    </svg>
    <span class="product-label">Warranty</span>
</label>

Answer 1

在 svg 路径上使用 fill 属性。

input[type="checkbox"]:checked+label {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  border: 1px solid $blue;
  color: $blue!important;
  font-weight: bold;
}

.select-option {
  height: 86px;
  width: 100%;
  border: 1px solid $light-grey;
  text-align: center;
  vertical-align: middle;
  font-family: $main-font;
  color: $grey;
  font-size: 14px;
  padding-top: 7px;
  border-radius: 3px;
}

.select-option:hover {
  border: 1px solid $blue;
}

.select-option:hover {
  color: $blue;
}

.select-option:hover path {
  fill: $blue;
}

.product-icon {
  width: 50px;
  height: auto;
}

input[type="checkbox"]:checked+label > svg > path{
  fill: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<input type="checkbox" name="warranty" class="sr-only" id="warranty">
<label for="warranty" class="select-option">
    <svg viewBox="0 0 60 40" class="product-icon">
        <path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.8813989 3.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" id="Path-1" stroke-width="4" fill="none" stroke="orange" stroke-dasharray="270" stroke-dashoffset="-270"></path>
    </svg>
    <span class="product-label">Warranty</span>
</label>