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>

CSS检查状态-处于选定状态的目标svg

1 个答案: