element-plus的el-dropdown去除鼠标悬浮或点击时的黑边框

已于 2023-11-23 10:48:53 修改
阅读量1.7k 收藏 1
点赞数 6
分类专栏： elmentplus 文章标签： elementplus el-dropdown
于 2023-11-23 10:47:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34569497/article/details/134571647
版权

设置为outline:unset;或者outline:none;即可

    :deep(.el-tooltip__trigger:focus-visible) {
      outline: unset;
    }

Jyann~
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓，当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况，无论里面是什么 HTML 元素和组件都会由此问题（完美解决方案）
王佳斌
09-11 6333
vue3 element plus组件库，element plus 下拉菜单点击或移入hover会出现黑边框，dropdown下拉菜单移入或点击出现围绕的黑边如何解决，vue3 element el-dropdown周围出现黑边框，element el-dropdown-menu组件鼠标移入时出现黑边框怎么解决，vue3 element plus Dropdown下拉菜单有黑边，element-plus中的dropdown下拉菜单点击或聚焦时会出现黑色外边框，使用element-plus中的下拉菜单，当鼠标
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ElementPlus使用el-dropdown有黑框
weixin_59232910的博客
08-19 780
ElementPlus使用el-dropdown有黑框
element-plus下拉列表有黑边
最新发布
qq_47240042的博客
05-07 277
element-plus下拉列表有黑边
鼠标悬浮在el-dropdown时，会有黑色边框
无心
07-04 2632
给el-dropdown设置样式setupStyle。
element plus 下拉菜单el-dropdown 白色边框问题
fendouweiqian的博客
01-21 1109
当您点击页面上的元素时，浏览器可能会自动给这个元素添加一个焦点轮廓（outline），这在某些情况下可能会显得不美观。您可以通过 CSS 来去除或自定义这个焦点样式。点击 el-dropdown 时出现一个不期望的白色边框，这通常是因为浏。
el-dropdown标题黑框问题
qq_45448242的博客
06-27 395
el-dropdown标题黑框问题。
element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 1788
Element plus下拉框有黑框框怎么取消？
element-plus中的下拉菜单el-dropdown获取到焦点或点击出现黑边情况
qq_47101042的博客
07-18 1038
使用elementplus下拉菜单遇到的一个小问题，每次鼠标点击的时候旁边会有一个小黑框，看起来很奇怪， 尝试修改。的需要注意一下层级问题，层级不对的话，css是无效果的)解决办法：(使用less和。
VUE3+element plus使用el-dropdown控件有黑色的边框
nopyramid的博客
11-25 941
在el-dropdown增加class名称，设置outline: unset样式即可。
element-plus 去除 [ dropdown ] 有时当鼠标移入标题时会出现外边框
qq_67656809的博客
05-25 4150
通过选中该类名并找到 :focus-visible伪类并设置 outlin 为 unset / none。使用element-plus中的 dropdown 下拉菜单时，点击或聚焦时会出现黑色外边框。outline 和 border 属性很类似。属性是在一条声明中设置多个轮廓属性的简写属性。通过控制台选中时，发现有该属性。outline 是CSS的。
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
取消Bootstrap的dropdown-menu点击默认关闭事件方法
10-18
在Bootstrap框架中，`dropdown-menu` 是一个非常实用的组件，它用于创建下拉菜单，通常与按钮或导航链接关联。然而，在某些情况下，我们可能需要自定义其默认行为，例如取消点击后自动关闭的功能。这通常是由于我们...
django-admin-list-filter-dropdown：在Django管理员列表过滤器中使用下拉菜单
02-05
django-admin-list-filter-dropdown 呈现为下拉列表的Django管理过滤器实现。 如果要在Django admin中过滤的字段具有十个以上的值，则过滤侧边栏会变得很长，混乱且难以使用。 此应用程序包含DropdownFilter类，该类...
Dropdown 下拉框（el-dropdown-menu）内容过长显示‘...’ 鼠标悬浮显示全部
migexiaoliang的博客
08-10 2770
使用element的Dropdown 下拉框（el-dropdown-menu）内容过长显示‘…’ 鼠标悬浮显示全部。有时候内容太长导致文字换行与其它文字折叠展示
Echarts tooltip鼠标悬浮取消背景提示框
youyi7890的专栏
09-02 2307
Echarts在地图显示时，鼠标悬浮会有一个提示框，显示具体的数据。 这个提示框showContent:true,但是加背景图的时候，会同时有背景提示框出现，不能单独显示图 这个时候用backgroundColor:'rgba(255,255,255,0)是不行的，提示框背景同样存在。 正确的做法：backgroundColor:'transparent'. ...
elment以及elementPlus选中组件出现黑框问题解决！！
夏日漱石的博客
10-05 1444
elment以及elementPlus选中组件出现黑框问题解决！！
vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色
Turn_to_empty的博客
03-13 4185
vue3修改 element-plus el-table 鼠标悬停、斑马纹及表头等样式
如何解决el-dialog弹窗上面有一层黑色蒙层？
weixin_42220130的博客
11-03 1443
Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body。正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。这种情况百分之90%是因为弹窗嵌套弹窗造成的，我遇到的情况是这样的，解决方法是给内层el-dialog加上。如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。属性，下面是简化后的示例。
element-plus设置el-select长度
07-28
根据引用\[1\]中提到的问题，可以通过修改样式代码来设置element-plus的el-select长度。引用\[2\]中给出了一个示例的样式代码，其中可以通过修改.el-input__wrapper的padding属性来调整el-select的长度。另外，还可以通过设置.el-select-dropdown__item的margin属性来调整下拉选项的宽度。这样可以根据需要来自定义el-select的长度。 另外，引用\[3\]中提到了element-plus的el-select组件有一个属性叫做fit-input-width，可以将下拉框的宽度设置为与输入框的宽度相同。这样可以确保el-select的长度与输入框的长度一致。 综上所述，可以通过修改样式代码或使用fit-input-width属性来设置element-plus的el-select长度。 #### 引用[.reference_title] - *1* [element-plus的el-select实现触底加载更多(新版本报错踩坑)](https://blog.csdn.net/qq_21473443/article/details/131169526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [element-plus修改el-select下拉框的位置](https://blog.csdn.net/qq_43651168/article/details/130712253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值