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

Question

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:

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?

tauzN · Accepted Answer · 2021-04-14 10:21:44Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related