element-plus el-input 修改边框 border

前提:Vue3 + element-plus;

1、去除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 的边框:



.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;
  }
}


2022.08.15 更
改变 el-input 在focus、blur、hover 状态下的border颜色有三种方法:
方法1、直接加class

				
                    
                

方法2、直接覆盖原来的样式**(修改下面三个红色的样式即可)**。
element-plus el-input 修改边框 border_第1张图片
方法3、修改整体element-ui 的风格样式。(直接看官网,简单易上手)

三种方案的影响范围各不相同,选择合适的即可。



下面兄弟问,怎么居中显示? 在

el-input__inner 下加 text-align: center; 即可(注意穿透)。

.xxxx {
    :deep(.el-input__inner){
        	text-align: center;
        }
}

element-plus el-input 修改边框 border_第2张图片

你可能感兴趣的:(工作中的小问题,vue.js,elementui,javascript)