Element el-input 去掉边框
有时候我们得到的需求是不需要这个
tip:将border属性设成0,虽然边框不见了,但是浏览器依然会对border-width和border-color进行渲染,会占用浏览器的资源。将border设置成none,浏览器就不会做出渲染动作。
然后我就在别人的贴子发现了好东西, >>> , >>> 是vue的深度选择器, vue 引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成的组件之间的样式污染。此时只能通过 >>> 穿透 scoped
1 | <div class="inputDeep"> |
/* 利用穿透,设置 input 边框隐藏 */.inputDeep>>>.el-input_inner{
border: 0;}
/* 如果使用 type 为 textarea 的 input 框的话,就要用下面这个了 /
.inputDeep>>>.el-textarea_inner {
border: 0;
resize: none;/ 去掉文本框右下角拉伸的标识*/}
上面的 >>> 方法已经在 Vue 3 中废除了
网上的方法浪费时间害人不浅,玩 CSS 真还得自己去看文档摸索,去用开发者工具去看样式到底是怎样渲染的,计算样式是什么情况
在用 div 把我们想要修改的目标组件包起来之后
我们写一个样式,这样就搞定了
1 | .inputDeep :deep(.el-input__wrapper) { |
其中 :deep 是 Vue 3 中的深度选择器,一个伪类
1 | <style scoped> |
上面的代码会被编译成:
1 | .a[data-v-f3f3eg9] .b { |