1、第一种方法:

<style>
/* 三种方法选择自己喜欢的一个即可 */
/* .el-input--prefix .el-input__inner{
  border: none;
} */
/* .el-input--small .el-input__inner {
    border: none;
} */
.el-input__inner{
  border: none;
}
</style>

缺点是style不能加scoped,这就改成了全局样式。

2、第二种方法(重要):

<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 下面拉伸的那个标志,如下图 */
  }

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

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐