Reduce opacity of background-image in a <select />

Question

As seen in the snippet, I have a <select /> with a custom arrow down icon as a background-image like so:

 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>

What I would like to achieve is to lighten the arrow-down icon, and only darken it upon being hovered. I have tried doing the background-image as a ::before but no luck..

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>

The following code will solve the problem

.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;
    }

---