element tab选中时会有蓝色边框

解决办法:在commos.scss中加入属性覆盖

.theme{
    .el-tabs__item:focus.is-active.is-focus:not(:active) {
         box-shadow: none;
   }
 }

或者:这里的一定要加上!Important ,因为npm run build 打包代码的时候的,这段代码会被的element ui 框架代码覆盖掉

.el-tabs__item:focus.is-active.is-focus:not(:active) {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
Element UI是一个基于Vue.js的桌面端组件库,它提供了一系列的UI组件,其中包括Input输入框。在使用Element UI的Input组件时,通常会有一些默认的样式,比如聚焦时的蓝色边框。要去除这个蓝色边框,可以通过覆盖默认的样式来实现。 以下是一些方法可以去除Input输入框聚焦时的蓝色边框: 1. 使用全局样式覆盖。你可以在全局样式文件中定义一个新的CSS规则,这个规则会覆盖掉Element UI中对应Input聚焦样式。例如: ```css /* 全局样式覆盖 */ input::-webkit-input-placeholder { /* WebKit浏览器的默认样式 */ color: red; } input:-moz-placeholder { /* Firefox 4到18的默认样式 */ color: red; } input::-moz-placeholder { /* Firefox 19及以后的默认样式 */ color: red; } input:-ms-input-placeholder { /* IE的默认样式 */ color: red; } input:focus { outline: none; /* 去除聚焦时的轮廓线 */ } ``` 2. 为特定的Input元素添加类名,并定义样式。如果你想要对特定的Input元素去除蓝色边框,可以给该元素添加一个特定的类名,然后在样式表中定义该类名对应的CSS规则: ```html <el-input class="no-outline"></el-input> ``` ```css /* 针对特定元素的样式覆盖 */ .no-outline:focus { outline: none; /* 去除聚焦时的轮廓线 */ } ``` 3. 使用深度选择器。Element UI提供了一个深度选择器(>>> 或 /deep/),可以用来穿透组件的样式封装。使用这个深度选择器,可以更精确地覆盖内部的样式: ```css /* 使用深度选择器 */ /deep/ .el-input .el-input__inner:focus { outline: none; /* 去除聚焦时的轮廓线 */ } ``` 请注意,对于Vue 3项目,深度选择器的写法可能有所不同,因为Vue 3对样式穿透的支持有所变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值