vue element-plus中el-input修改边框border的方法_vue.js_

前提：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; } }

改变 el-input 在focus、blur、hover 状态下的border颜色有三种方法：

方法1、直接加class

方法2、直接覆盖原来的样式**（修改下面三个红色的样式即可）**。

方法3、修改整体element-ui 的风格样式。（直接看官网，简单易上手）

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

下面兄弟问，怎么居中显示？ 在

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

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

总结 

到此这篇关于vue element-plus中el-input修改边框border的文章就介绍到这了,更多相关element-plus el-input修改边框border内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！