Rotating svg with css causes a gray background to appear on the svg-CodePudding

I have this button that has :hov animations on it: Button without pressing it

and this is the button after pressing it, for some reason a background appears on the svg element : Button after pressing it

css for the button idle and svg idle:

.input-accordion{
display: flex;
flex-direction: row;
align-items: center;
background-color:rgb(32, 32, 109) ;
color: white;
width: 300px;
text-align: left;
padding-left: 30px;
outline: none;
border-style: none;
border: 2px solid white;
transition: 0.3s ease;
width:400px;

}

.input-accordion img{
margin-left: 5px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
transform: scale(90%);
transition: 0.3s ease;

}

I activate the button by adding a "open" class name to it, here is the css for activated button (and the svg):

.input-accordion.open{
background-color: rgb(136, 136, 202);

}

.input-accordion.open img{
background-color: rgb(136, 136, 202);
transform: rotate(180deg);
transition: 0.3s ease;

}

.input-accordion{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color:rgb(32, 32, 109) ;
    color: white;
    width: 300px;
    text-align: left;
    padding-left: 30px;
    outline: none;
    border-style: none;
    border: 2px solid white;
    transition: 0.3s ease;
    width:400px;
}
.input-accordion.open{
    background-color: rgb(136, 136, 202);
}
.input-accordion.open svg{
    background-color: rgb(136, 136, 202);
    transform: rotate(180deg);
    transition: 0.3s ease;
}
.input-accordion svg{
    margin-left: 5px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
    transform: scale(90%);
    transition: 0.3s ease;
}
.input-accordion:hover{
    cursor: pointer;
    background-color: rgb(136, 136, 202);
    transition: 0.3s ease;


}

<button class='input-accordion'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>
<br/>
<br/>
<button class='input-accordion open'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>

CodePudding user response：

I think you need to remove background color from .input-accordion.open svg rule:

<!DOCTYPE html>
<html>

<head>
  <style>
    .input-accordion {
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: rgb(32, 32, 109);
      color: white;
      width: 300px;
      text-align: left;
      padding-left: 30px;
      outline: none;
      border-style: none;
      border: 2px solid white;
      transition: 0.3s ease;
      width: 400px;
    }
    
    .input-accordion.open {
      background-color: rgb(136, 136, 202);
    }
    
    .input-accordion.open svg {
      /* background-color: rgb(136, 136, 202); <-- don't add background to svg*/
      transform: rotate(180deg);
      transition: 0.3s ease;
    }
    
    .input-accordion svg {
      margin-left: 5px;
      filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
      transform: scale(90%);
      transition: 0.3s ease;
    }
    
    .input-accordion:hover {
      cursor: pointer;
      background-color: rgb(136, 136, 202);
      transition: 0.3s ease;
    }
  </style>
</head>

<body>
  <button class="input-accordion">
      <h3>Bleach</h3>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
      </svg>
    </button>
  <br />
  <button class="input-accordion open">
      <h3>Bleach</h3>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
      </svg>
    </button>
</body>

</html>