element el-input 去掉边框

css 同时被 2 个专栏收录
14 篇文章 0 订阅
52 篇文章 0 订阅

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="inputDeep">
    <el-input></el-input>
</div>

 

  /* 利用穿透,设置input边框隐藏 */
  .inputDeep>>>.el-input__inner {
    border: 0;
  }
  /* 如果你的 el-input type 设置成textarea ,就要用这个了 */
  .inputDeep>>>.el-textarea__inner {
    border: 0;
    resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志,如下图 */
  }

 

 

 

才疏学浅,如有不足,欢迎指出 ,不胜感激 (•̀ᴗ•́)و ̑̑

 

 

 

  • 8
    点赞
  • 20
    评论
  • 20
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值