I have a custom-designed select dropdown with unique symbols for the select arrow. To achieve this look, I've 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 here's how it looks: https://i.stack.imgur.com/iPu6f.png
However, I'm struggling to make the select dropdown open when the user clicks on the custom down arrow. I attempted using an @click method on the wrapper, but couldn't get it to work. Any help would be greatly appreciated!