Element el-input 去掉边框

有时候我们得到的需求是不需要这个 的边框的,但是我们又不能直接通过 border: none; or border: 0; 直接把边框干掉

tip:将border属性设成0,虽然边框不见了,但是浏览器依然会对border-width和border-color进行渲染,会占用浏览器的资源。将border设置成none,浏览器就不会做出渲染动作。

然后我就在别人的贴子发现了好东西, >>> , >>> 是vue的深度选择器, vue 引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成的组件之间的样式污染。此时只能通过 >>> 穿透 scoped

1
2
3
<div class="inputDeep">
<el-input></el-input>
</div>

/* 利用穿透,设置 input 边框隐藏 */
.inputDeep>>>.el-input_inner{
border: 0;
}

/* 如果使用 type 为 textarea 的 input 框的话,就要用下面这个了 /
.inputDeep>>>.el-textarea_inner {
border: 0;
resize: none;/
去掉文本框右下角拉伸的标识*/

}

上面的 >>> 方法已经在 Vue 3 中废除了
网上的方法浪费时间害人不浅,玩 CSS 真还得自己去看文档摸索,去用开发者工具去看样式到底是怎样渲染的,计算样式是什么情况

在用 div 把我们想要修改的目标组件包起来之后

我们写一个样式,这样就搞定了

1
2
3
4
.inputDeep :deep(.el-input__wrapper) {
background-color: #FFFFFF;
box-shadow: 0 0 0 0;
}

其中 :deep 是 Vue 3 中的深度选择器,一个伪类

1
2
3
4
5
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>

上面的代码会被编译成:

1
2
3
.a[data-v-f3f3eg9] .b {
/* ... */
}