element el-input 去掉边框

本文介绍了如何使用Vue的深度选择器>>>来去掉Element UI的el-input组件边框。常规的border设置不起作用,因为浏览器仍会渲染border-width和border-color。通过使用>>>配合父级选择器,可以局部修改组件样式,避免样式污染。同时,文章提到纯CSS写>>>无效果,强调了使用场景的重要性。最后,作者分享了前端学习的思路和资源,包括详细的Web前端学习大纲和高级教程。
摘要由CSDN通过智能技术生成

element样式还是蛮好的,只是有时候我们需要做一些调整,比如,el-input 的边框,官网是这样子的

我们需要这样子的

然后我们常规操作,**border: none;**或者 border: 0; 发现行不通,哈哈哈哈哈

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

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

tip:无任何依赖时,纯css写**>>>**是无效果哒

那我们来看一下怎么操作这个 >>> ,要注意这里是 父级>>>el-input ,必须是这样,否则没有效果

<div class="
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值