element input修改输入边框

版本：Vue3 + element-plus;

1. 去掉input边框

<el-input class="inputDeep" readonly v-model="planName"></el-input>

.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}

2. 去除 textarea 的边框

<el-input type="textarea" class="inputDeep" readonly v-model="planName"></el-input>

.inputDeep {
  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    resize: none;
    cursor: default;
  }
}

3. 改变 el-input 在focus、blur、hover 状态下的border颜色：

轉載： element-plus el-input 修改边框 border_element-plus 去除el-input-优快云博客