- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想改变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
样式。
有没有办法制作类似于您使用 Vuetify 的 v-autocomplete
看到的图像?
如有任何帮助,我们将不胜感激。
最佳答案
menu-props: { rounded }
对于 Vuetify 的圆形菜单边框,您可以使用名为 rounded
的菜单属性来避免直接修改 CSS。将它与其他 menu-props
一起传递:
:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl' // <-- Here ✅
}"
关于 Vuetify Border radius页面你可以看到它接受的一些值:
xl
值似乎最符合您的图像。这是一个demo
或者,如果您想直接修改 CSS,请使用比 Vuetify 默认选择器更具体的选择器。例如:
.v-application .v-autocomplete__content.menuable__content__active {
border-radius: 100px !important;
}
!important
是取代 Vuetify 自己的 !important
关于javascript - 如何更改 Vuetify v-autocomplete 菜单边框半径样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65681183/
我有 2 个表:city 和 city_neighbor。 city 包含所有城市的列表,而 city_neighbor 包含给定城市的邻居:insert into city_neighbor (ci
我需要一点帮助来了解我使用 RADIUS+LDAP 的无线登录是否足够安全。 我有这样的基础设施:PC 客户端 (Linux) + ASUS AP Wireless + FreeRadius 和 OP
我正在为我的应用程序使用 Google Maps iOS sdk。在我的应用程序中,用户可以绘制一个栅栏(一个圆圈),然后可以编辑以更改和调整圆的半径。 它的大小调整正确但是当半径值改变它的瞬间时,不
我想为我的搜索表单使用传单标记(用于 latLng)和 slider (用于半径)。 mongodb 部分将像 location: { $geoWithin: { $centerSpher
我有一个有背景的 ImageView。我需要将 border-radius 设置到我的 ImageView。我在另一个 XML 文件中使用以下代码并将其设置为 android:src 但是当我设置背景
我正在使用 Bing Maps API 构建一个 javascript 应用程序,我想根据中心点和扇形参数构成扇形几何图形。 我在 PostgreSQL 数据库中有一个表“points”,顶部是 Po
我在我的游戏中创建了一个 ATriggerSphere 实例,并将其放置在我角色的位置,如下所示: //Create activate trigger radius activateRadiusTri
我有对图像应用一些变换以检测圆圈的代码 (GaussianBlur->cvtColor(gray)->canny->HoughCircles) 结果我得到了vector circles;数组。 如果我
在我使用 bootsrap 3 的 Rails 应用程序中,我的导航栏上似乎有一个奇怪的 4px 边界半径,我似乎无法摆脱它。 我试过了 .navbar { border-radius: none
你好我想做半圆旋转轮。所以我为此使用了iCarousel。我的问题是如何根据屏幕尺寸改变轮子的半径。 这些是我的约束。 这个红色 View 是 iCarousel View 最佳答案 有一个值 iCa
我正在尝试: 没有角半径。 所有角半径 == 10dp。 是否有可能以及如何指定角:10dp(左上)10dp(右上)0 0(下)? 最佳答案 在 Android 开发者中 http://devel
我正在使用来自 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools 的这个例子使用户能
我对 MySql 相当陌生,我想要创建一个过程,在其中我可以插入任何邮政编码和距离,然后取回该距离内的所有邮政编码。我确实找到了一个公式并尝试根据我的需要 reshape 它,但我无法做到。我所拥有的
我通过 RomainNurik 使用库向用户显示 Undo-Toast(如在 Gmail 应用程序中) 在 KitKat 之前,toast 选项是矩形的,而在 KitKat 中,toast 消息是圆角
默认情况下,iPad 模态表单获得圆角。在一些 Apple 的应用程序中,例如 iTunes,表单具有完美的方角。是否有一种相对简单的方法可以删除不会让我被 App Store 拒绝的圆角半径? 最佳
我的数据库有各种兴趣点。我希望用户根据他们的位置看到他们。还有3个按钮,显示2km/5km/15km半径内的兴趣点。我无法对这些半径实现放大功能。所以我正在寻找缩放系数(从 2 到 21)和物理距离(
使用 CSS,我可以在选项卡导航器中设置选项卡顶 Angular 的圆 Angular 半径: .tabstyle { corner-radius: 10;
我有这个标签,我只想在右上角和左上角做圆 Angular 。但它最终绕过了所有 4 个 Angular 。 我做了什么: 和 我的 pageStyles.css 文件是: .my
有人可以帮助我在我的谷歌地图标记周围添加一个圆/半径吗? function createMarker ( size, i,id,lat,lng,pin,title,counter,image,pr
我的网站布局很奇怪(由我的客户设计),但我开发得很好。 问题是 Chrome(版本 22)不工作,但在 Firefox(版本 16)和 IE 9 中工作。 问题出在 colRight 中,有两个 di
我是一名优秀的程序员,十分优秀!