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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to make the entire div/wrapper open select dropdown on click in Vue? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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">
            <option :value="null">Filter</option>
            <option value="0">Option 1</option>
            <option value="1">Option 2</option>
    <img src="@/assets/down-arrow.svg" alt="down arrow">


.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?


You can add a custom image inside the select element


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

import { defineComponent } from "vue";
export default defineComponent({

  .select {
    height: 30px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='' 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;
We are here to answer your question about How to make the entire div/wrapper open select dropdown on click in Vue? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji