How to change Vuetify v-autocomplete menu border radius style?(如何更改V-AutoComplete菜单边框半径样式？)

本文介绍了如何更改V-AutoComplete菜单边框半径样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要更改v-autocomplete下拉列表的框样式，并为下拉列表指定border-radius样式，如下图所示。

到目前为止，我设计的内容如下图所示。

到目前为止，我已经将menu-props属性直接赋予了v-autocomplete标记：

<v-autocomplete
  :menu-props="{
    nudgeBottom: 15 + 'px',
    zIndex: 2,
    allowOverflow
  }"
  :items="searchBarInfo"
  rounded
  outlined
  filled
  clearable
  item-color="deep-purple"
  height="50"
  placeholder="Search the ..."
  color="rgba(0, 0, 0, 0.7)"
  background-color="white"
  prepend-inner-icon="mdi-magnify"
  class="my-text-style "
  :no-data-text="($vuetify.noDataText = 'Nothing found')">
</v-autocomplete>

以上代码仅添加v-autocomplete标记，而不添加border-radius样式。

有没有办法制作像您用Vutify的v-autocomplete看到的图像一样的图像？

如有任何帮助，我们将不胜感激。

推荐答案

-或-修改CSS

或者，如果要直接修改CSS，请使用比Vutify默认值更具体的选择器。例如：

.v-application .v-autocomplete__content.menuable__content__active {
  border-radius: 100px !important;
}

!important取代Vutify自身的!important

这篇关于如何更改V-AutoComplete菜单边框半径样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！