How to change font size of element in v-autocomplete?

Question

Im trying to make the size of the elements title 1.7rem. I tried using template with v-bind but i cant effect the size. The only solotion i found is to use a template without the v-bind and give a custom title style, but then when clicking the list-item it wont trigger the v-autocomplete and select the item. I Need to find a way to eiter make the template clickable (adding @click doesnt make the menu close), or find a way to cahnge the style of elements. I also noticed that i coudnt edit the color of the icon without the borders if you know anything anout that as well.

this is with the template (not clicking / not updating and closing the menu)

<v-autocomplete
  v-model="countryCode"
  :items="countryCodeItems"
  variant="outlined"
>
  <template v-slot:item="{ item }">
    <v-list-item @click="selectCountryCode(item)">
      <v-list-item-title style="font-size: 1.7rem">{{
        item.title
      }}</v-list-item-title>
    </v-list-item>
  </template>
</v-autocomplete>

this is the items:

[{title: "USA (+710)", value: +710},
{title: "FRANCE (+640)", value: +640}
...
]

Answer 1

You can use CSS. Since v-autocomplete uses v-list-item which is also used by other components, and you probably only want to target the font-size of v-autocomplete, first add a class name to the v-autocomplete dropdown menu

<v-autocomplete
  :items="items"
  :menu-props="{
    contentClass: 'autocomplete-overlay'
  }"
></v-autocomplete>

Then you can use that class to select the font-size of the list item's title.

.autocomplete-overlay .v-list-item-title {
  font-size: 1.5rem !important;
}