element-plus el-input 删除边框 border

作者：System 时间：2024年08月27日分类：所有,elementui 字数：443

在Element Plus中，要删除el-input的边框，可以通过CSS覆盖其默认样式来实现。以下是一个简单的例子，展示了如何通过添加一个自定义类来移除边框。

首先，在你的CSS文件中添加一个类：




.no-border-input .el-input__inner {
  border: none !important; /* 使用 !important 来确保覆盖默认样式 */
  box-shadow: none !important; /* 也可以移除阴影 */
}

然后，在你的Vue模板中给el-input添加这个自定义类：




<template>
  <el-input class="no-border-input" placeholder="请输入内容"></el-input>
</template>

这样就会移除输入框的边框和阴影，使其看起来没有边框。