Make svg file change colours on hover on select menu-CodePudding

I have seen this post below and it does not help, I read it top to bottom and still don't understand How to change the color of an svg element? There are many competing answers, none of which look like what I'm doing.. and perhaps it does if you understood it more.. but I don't, which is the reason I came to this site. I would be very appreciative if someone could translate my codepen into one of those answers in a clear concise way.

I have a select menu which uses a svg graphic for the open arrow. It has been requested that on hover of the select I make the svg turn green and get slightly bolder. I have tried changing the background url property by adding a colour with no luck as I have read on other threads, but that just changes my select menu to green. How can I just change the svg arrow colour and make it bolder (if even possible)?

I created a codepen https://codepen.io/justinblayney/pen/PoENamE

I tried adding another graphic, but that doesn't always load in time and we don't want to preload it.

here is my scss

  .find-an-option {
    display: grid;
    grid-template-columns: 1fr;
    
    select::-ms-expand,
      .select:after {
        display: none;
        content: "";
      }

      select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url("https://res.cloudinary.com/djk8wzpz4/image/upload/v1647694948/path-arrow_wloczn.svg") center right
          30px no-repeat;
        border: white 2px solid;
        background-color: white;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 7px;
        font: normal normal bold 16px/18px Arial;
        padding: 0px 25px;
        &:hover {
          border: #242b44 2px solid;
          background: url("https://res.cloudinary.com/djk8wzpz4/image/upload/v1647694948/path-arrow_wloczn.svg") center
            right 30px no-repeat;
          background-color: white;
        }
      }
    
}

here is my html

  <form >
        <select id="games" name="games" >
            <option value="" selected>Games</option>
            <option value="" selected>option 1</option>
           <option value="" selected>option 2</option>
        </select>
       
    </form>

CodePudding user response：

You can't change the fill or stroke color of an background-image.

But you could easily use 2 svgs inlined as data-URLs (converted by Yoksel's converting tool):

.find-an-option {
  display: grid;
  grid-template-columns: 1fr;
}
.find-an-option select::-ms-expand,
.find-an-option .select:after {
  display: none;
  content: "";
}
.find-an-option select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg xml,") center right 30px no-repeat;
  border: white 2px solid;
  background-color: white;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 7px;
  font: normal normal bold 16px/18px Arial;
  padding: 0px 25px;
}
.find-an-option select:hover {
  border: #242b44 2px solid;
  background: url("data:image/svg xml,") center right 30px no-repeat;
  background-color: white;
}

  <form >
        <select id="games" name="games" >
            <option value="" selected>Games</option>
            <option value="" selected>option 1</option>
           <option value="" selected>option 2</option>
        </select>       
</form>

Since your arrow/chevron icon is rather small the additional css "bloat" should be negligible.