html - 降低 <select/> 中背景图像的不透明度

Question

如代码片段所示，我有一个 <select />带有自定义向下箭头图标作为 background-image像这样:

select {
    display: block;
    width: 100%;
    max-width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
  }

<!-- begin snippet: js hide: false console: true babel: false -->

<select>
  <option value="" hidden>Status</option>
  <option>Status1</option>
  <option>Status2</option>
  <option>Status3</option>
</select>

我想要实现的是使向下箭头图标变亮，并且只有在悬停时才使它变暗。我试过做 background-image作为::before但没有运气..

Answer 1

select {
        display: block;
        width: 100%;
        max-width: 100%;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
      }
   .select:hover.select:before{
        content: "";
        position: absolute;
        width: 1rem;
        height: 100%;
         background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
          linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 100%
          );
        background-repeat: no-repeat, repeat;
        top: 2px;
        right: 8px;
    }

<div class="select">
      <select>
        <option value="" hidden>Status</option>
        <option>Status1</option>
        <option>Status2</option>
        <option>Status3</option>
      </select>
    </div>

下面的代码可以解决问题

.select:hover.select:before

---

 <div class="select">
      <select>
        <option value="" hidden>Status</option>
        <option>Status1</option>
        <option>Status2</option>
        <option>Status3</option>
      </select>
    </div>

---

    select {
        display: block;
        width: 100%;
        max-width: 100%;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
      }
   .select:hover.select:before{
        content: "";
        position: absolute;
        width: 1rem;
        height: 100%;
         background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
          linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 100%
          );
        background-repeat: no-repeat, repeat;
        top: 2px;
        right: 8px;
    }

---