el-input样式改变

Question

element-plus 在使用el-input时需要将其背景色设置为透明色，在css中设置如下

在form中如下

页面效果如下

如何设置使elinput变为透明色

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

为了设置 el-input 的背景色为透明色，你可以使用以下步骤：

1. 在你的组件或全局样式文件中，使用深度选择器（:deep）来覆盖默认的 el-input 样式。
2. 设置 .el-input__inner 的 background-color 属性为 transparent。

基于你提供的图1和图2内容，以下是正确的样式设置方法：

<style scoped>
  /* 局部覆盖 */
  :deep(.el-input .el-input__inner) {
    background-color: transparent !important;
  }
</style>

确保你的样式足够具体，以便能够覆盖默认的样式。使用 !important 是为了确保样式能够覆盖其他可能存在的样式规则。但通常建议避免使用 !important，因为它可能导致样式难以维护，但在这种情况下，它是必要的。

在 <el-form-item> 中的使用与图3和图4所示一致。只需确保你的 <el-input> 标签包裹在 <el-form-item> 中，并且正确地绑定了 v-model。

最后，页面效果应该显示“登录”和“重置”按钮，而输入框的背景色应该是透明的。如果你遇到任何问题或看到不同的效果，请检查是否有其他样式规则正在影响 el-input 的样式。