How to make the entire div/wrapper open select dropdown on click in Vue?

I have a select dropdown with options. The design has a custom symbol for the select arrow, so what I’ve done is hidden the default select arrow/triangle, and placed our symbol on top (as an image file).

<div class="select-wrapper">
    <label>
        <select>
            <option :value="null">Filter</option>
            <option value="0">Option 1</option>
            <option value="1">Option 2</option>
        </select>
    </label>
    <img src="@/assets/down-arrow.svg" alt="down arrow">
</div>

css:

.select-wrapper {
            position: relative;
            cursor: pointer;
            margin-right: 40px;

            img {
                position: absolute;
                right: 0;
                bottom: 8px;
            }
            select {
                cursor: pointer;
                height: 30px;
                border: none;
                border-bottom: 1px solid #000000;
                font-size: 12px;
                line-height: 16px;
                padding: 0;
                width: 150px;
                -moz-appearance: none; /* Firefox */
                -webkit-appearance: none; /* Safari and Chrome */
                appearance: none;
            }
        }

And the final result: simple select dropdown

Unfortunately, with my lack of knowledge in the front end, I’m clueless as to how to now be able to open the select dropdown when the user clicks on the 16x16px down arrow. I tried an @click method on the wrapper to open the select dropdown with a ref, but that wasn’t working. Anyone can help a new Vue dev?

Answer

You can add a custom image inside the select element

Example

<template>
  <select class="select">
    <option :value="null">Filter</option>
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
  </select>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({

});
</script>
<style>
  .select {
    height: 30px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    //background-image: url("@/assets/down-arrow.svg");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-left: 1rem;
    padding-right: 2.5rem;
    border: 0;
    border-bottom: 1px solid #000000;
  }
</style>