Style a v-autocomplete dropdown [vuetify] - css

Question

I have a dropdown menu that I would like to style.
When it's up, the dropdown looks like this.
And when it's down, it looks like this.
This yellow border is just a border-bottom style that I added to the dropdown component. The big problem is that, depending on where the user is on the page, the dropdown may appear on top of the input, in the middle or below it (as it always should).
So this is what it looks like when the user clicks on the input when it's not on the "right position".
As you can see, it just looks ridiculous.. What I'd like is a way to change the input's border-bottom: I'd like it light-grey when the dropdown is up and yellow when it's down.
Does anyone know how to do this ? I already tried using this link : https://vuetifyjs.com/en/components/selects/#icons
But it turns out the v-select component doesn't work with the "Select All" feature (that I really need).
Here's what my code looks like :
<!-- CATEGORY -->
<template>
<v-autocomplete
loading="true"
:menu-props="{ maxWidth: 313}"
v-model="valuesType"
:items="typeArray"
label="Category"
:search-input.sync="searchType"
filled
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
background-color=#313131
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
color="var(--yellow)"
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType"
height="48px"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'var(--yellow)' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</template>
<template v-slot:selection="{ item, index }">
<div v-if="valuesType.length === 1">
<span v-if="index === 0 && valuesType[0].length > 16">{{ valuesType[0].slice(0,16) }}... </span>
<span v-if="index === 0 && valuesType[0].length <= 16">{{ valuesType[0] }}, </span>
</div>
<div v-if="valuesType.length === 2 ">
<span v-if="index === 0 && valuesType[0].length <= 8">{{ valuesType[0] }}, </span>
<span v-if="index === 0 && valuesType[0].length > 8">{{ valuesType[0].slice(0,8) }}... </span>
<span v-if="index === 1 && valuesType[1].length <= 8">{{ valuesType[1] }}, </span>
<!--<span v-if="index === 1 && valuesType[1].length > 8">{{ valuesType[1].slice(0,8) }}... </span>-->
<span v-if="index === 1 && valuesType[1].length > 8"
class="grey--text text-caption spanFilters"
>
+1 other
</span>
</div>
<div v-if="valuesType.length > 2">
<span v-if="index === 0 && valuesType[0].length <= 10">{{ valuesType[0].slice(0,10) }} </span>
<span v-if="index === 0 && valuesType[0].length > 10">{{ valuesType[0].slice(0,8) }}... </span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesType.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</template>
Any suggestion or help would be appreciated ! :)