去除 element-ui Dropdown 下拉菜单右击时出现的蓝色边框

最新推荐文章于 2024-05-29 16:04:47 发布
最新推荐文章于 2024-05-29 16:04:47 发布
阅读量6.7k 收藏 7
点赞数 5
分类专栏： Element 文章标签： element 下拉菜单 Dropdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daipianpian/article/details/103260414
版权

使用element-ui Dropdown 下拉菜单时，发现鼠标左击菜单时没什么问题，但是在右击时和点中刷新时会出现蓝色边框。

查看代码 发现 

关于-webkit-focus-ring-color是一种色彩属性，蓝色，类似outline的蓝颜色，

改成

:focus {outline: 0;}

竹立荷塘
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui@2.15.9 cdn资源
08-09
Element UI 提供了大量的组件，如按钮（Button）、表格（Table）、下拉菜单（Dropdown）、日期选择器（DatePicker）、模态框（Modal）、通知（Notification）等。每个组件都有详细的文档说明和示例，你可以根据需要...
小程序-dropdownmenu 下拉菜单
06-26
dropdownmenu一个写好的微信小程序帅选条件框，多条件筛选，下拉菜单，直接引用组件就可以 读懂并灵活运用必须具有html，css ，js基础，除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
Vue3+element ui取消el-select下拉选边框
qq_44813770的博客
01-06 2536
Vue3+element ui取消el-select下拉选边框
element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 2051
Element plus下拉框有黑框框怎么取消？
element plus 去掉select选择框的边框，并修改右侧图标
最新发布
qq_46738283的博客
05-29 585
1.去掉选择框边框 2.修改选择框右侧图标。
Element-Plus下拉菜单边框去除教程
interest_ing_的博客
03-26 1550
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在使用 Element-Plus 进行开发时，我们可能会遇到需要自定义组件样式的情况，比如去除下拉框在聚焦时的默认边框。本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框，并简要介绍 Element-Plus 以及 Vue 的相关概念。
vue使用elementui去掉el-select的边框显示
m0_73582531的博客
06-21 1084
【代码】vue使用elementui去掉el-select的边框显示。
css：鼠标经过el-dropdown 组件上会出现一个蓝色的小框
彭世瑜的博客
07-08 1735
效果如下，原以为是浏览器的bug，升级后就好了，没想到一直有这个问题。浏览器默认有一个样式，加了一个边框。组件上会出现一个蓝色的小框。知道原因之后，就好处理了。页面刷新后，鼠标经过。
Element Dropdown下拉菜单的使用方法
10-15
在 Element 中，Dropdown（下拉菜单）是一个重要的组件，它提供了丰富的交互式菜单选项，通常用于显示更多操作或功能。在本文中，我们将深入探讨 Element Dropdown 的使用方法。 ### 基础用法 要创建一个基础的 ...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
iview通过Dropdown(下拉菜单)实现的右键菜单
10-14
官方目前不提供右键菜单，这里借助Dropdown（下拉菜单）来实现，故为“官方“。 　　既然Dropdown有类似功能，如果将其文字隐藏，并且在合适时机弹出，便可实现，其自身就是iview中一个组件，不言而喻，功能强大、简洁。 　　源码之下，了无秘密，简单陈述下思路，在模板中正常使用Dropdown组件，属性、样式需要单独设置（style="display:none" trigger="click"），即默认不显示，click触发，右键按下时首先设置其可见，在更改reference对象引用即可。 模板如下 逻辑如下： 源码跟踪： 　　一。标签a不可见，原本以为只要改变left top，菜单
element plus 下拉菜单el-dropdown 白色边框问题
fendouweiqian的博客
01-21 1183
当您点击页面上的元素时，浏览器可能会自动给这个元素添加一个焦点轮廓（outline），这在某些情况下可能会显得不美观。您可以通过 CSS 来去除或自定义这个焦点样式。点击 el-dropdown 时出现一个不期望的白色边框，这通常是因为浏。
el-drawer去黑框
CRT本人的博客
05-31 406
>>>.el-drawer:focus { outline: none; } >>> .el-drawer__header span:focus { outline: none; } >>>.el-drawer__close-btn:focus { outline: none; }
解决点击element单选框时出现蓝色边框
yyt06的博客
04-27 1224
【代码】解决点击element单选框时出现蓝色边框。
去除element-UI表格鼠标悬停背景颜色
以爱护甲,爱满枫林。
03-25 2288
去除element-UI表格鼠标悬停背景颜色 .el-table tbody tr:hover > td { background-color: unset !important }
Elementui蓝色阴影边框相关问题的解决方案
qq_40591925的博客
05-19 1442
Tabs标签页出现蓝色阴影边框解决方案 .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; outline: none; } el-button-radio出现蓝色阴影边框解决方案 .el-radio-button:focus:not(.is-focus):not(:active):not(.is-di
Element-ui el-select 选择器(下拉框) 修改样式
m0_56471534的博客
07-17 5138
表格里引入el-select，根据需求修改下拉框样式。
element-ui 使用Dropdown实现二级菜单
11-26
element-ui是一款基于Vue.js的组件库，其中包含了Dropdown组件，可以用来实现下拉菜单。下面是使用element-ui实现二级菜单的方法： 1.首先需要在Vue项目中安装element-ui组件库，可以使用npm命令进行安装： ```shell npm install element-ui --save ``` 2.在需要使用Dropdown组件的Vue文件中引入Dropdown组件： ```javascript import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui'; ``` 3.在Vue文件中使用Dropdown组件，并在Dropdown组件中添加DropdownMenu和DropdownItem组件，其中DropdownMenu组件用来包含二级菜单，DropdownItem组件用来添加菜单项： ```html <template> <div> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu> <el-dropdown-item>菜单项1</el-dropdown-item> <el-dropdown-item>菜单项2</el-dropdown-item> <el-dropdown-item> <span>二级菜单<i class="el-icon-arrow-right el-icon--right"></i></span> <el-dropdown-menu> <el-dropdown-item>二级菜单项1</el-dropdown-item> <el-dropdown-item>二级菜单项2</el-dropdown-item> </el-dropdown-menu> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> ``` 4.最后需要在Vue文件中引入element-ui样式： ```javascript import 'element-ui/lib/theme-chalk/index.css'; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值