0

I have an toggle switch with an svg icon which is being added in the css through background image. Is there any way to change the fill of that svg from red to white? Code below

input {
  -webkit-appearance: none;
  background:white;
  border: 1px solid blue;
  position:relative;
  transition: background 0.3s;
  border-radius: 25px;
  width: 55px;
  height: 32px;
}


input::after {
  border-radius: 50%;
  background: black;
  position:absolute;
  top:50%;
  content: '';
  left: 30%;
  transform: translate(-50%, -50%);
  transition: left 0.3s;
    height: 1.5rem;
  width: 1.5rem;
}

input:checked {
  background:gray;
  border-color:gray;
  background-repeat:no-repeat;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg');
  background-size: 15px;
  background-position: center left 7px;
}

input:checked::after {
  background:white;
  left: 70%;
}
 <input
            type="checkbox"
                 checked
          />
rgc998
  • 299
  • 2
  • 15
  • no it does not, I am using the svg as background image – rgc998 May 09 '23 at 17:26
  • 3
    TL;DR: **You can't access/manipulate SVGs in background images/data-URLs or `` tags**. The linked post contains a variety of approaches/workarounds: from changing the color via css (or svg) filters or using another embedding approach (e.g native web components) etc. Another post ["How to modify the fill color of an SVG image when being served as background image?"](https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima) – herrstrietzel May 09 '23 at 17:34

0 Answers0