除去elementuiUI中表单上的el-input的边框样式，并改为下换线

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

要移除 Element UI 中 el-input 的边框并改为下划线样式，可以通过自定义 CSS 来实现。以下是实现这种样式的方法和示例代码：




.el-input__inner {
  border: none !important;
  box-shadow: none !important;
}




.el-input__inner:focus {
  border-color: #dcdfe6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(183, 189, 213, 0.4) inset !important;
}

将以上 CSS 添加到你的样式表中，确保它有足够的优先级来覆盖 Element UI 默认的样式。如果你使用的是 Vue CLI 创建的项目，可以在 src/assets/style.css 或者其他全局样式文件中添加上述 CSS 规则。

请注意，这里使用了 !important 来确保自定义样式具有最高优先级。然而，在实际项目中应尽量避免使用 !important，以维持样式的可维护性。