使 svg 文件在悬停在 select 菜单上时更改颜色

Question

我在下面看到了这个post，但没有帮助，我从头到尾看了一遍还是没看懂How to change the color of an svg element?有很多相互竞争的答案，none这看起来像我正在做的......如果你更了解它，也许它确实如此......但我不这样做，这就是我来到这个网站的原因。如果有人能以简洁明了的方式将我的代码笔翻译成其中一个答案，我将不胜感激。

我有一个 select 菜单，它使用 svg 图形作为打开的箭头。有人要求在悬停 select 时让 svg 变为绿色并稍微加粗。我曾尝试通过添加一种颜色来更改背景 url 属性，但没有成功，就像我在其他线程上看到的那样，但这只是将我的 select 菜单更改为绿色。我怎样才能更改 svg 箭头颜色并使其更粗（如果可能的话）？

我创建了一个codepen https://codepen.io/justinblayney/pen/PoENamE

我尝试添加另一个图形，但它并不总是能及时加载，我们不想预加载它。

这是我的 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;
        }
      }
    
}

这是我的 html

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

Answer 1

您无法更改 background-image 的填充或描边颜色。

但是您可以轻松地使用 2 个内联的 svgs 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,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.4 11.2' %3E%3Cpath  d='M1.5,1.5l8.2,8.2l9.1-8.2' style='fill:none;stroke:%23242B44;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;'/%3E%3C/svg%3E") 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,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.4 11.2' %3E%3Cpath  d='M1.5,1.5l8.2,8.2l9.1-8.2' style='fill:none;stroke:green;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'/%3E%3C/svg%3E") center right 30px no-repeat;
  background-color: white;
}

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

由于您的 arrow/chevron 图标很小，额外的 css“膨胀”应该可以忽略不计。

使 svg 文件在悬停在 select 菜单上时更改颜色

Make svg file change colours on hover on select menu

css

svg

sass