0


Vue3:elementplus输入框去掉边框及缩放

有时候需要在一些特定的位置比如表格内放输入框,但是表格有框,输入框也有框,便变得不美观,所以就有了如下的需求

需求:element输入框去掉边框,并且不能进行缩放,即没有输入框右下角的小三角

第一个是去除缩放

图片实例
对于这个缩放,我们可以使用输入框的自带属性resize
resize
把resize的值设为none,便可以消失这个小三角并且不能进行缩放设为none

第二个是去掉输入框的边框

我们需要考虑三种情况下的输入框边框:
①正常情况下的输入框
②hover情况下的输入框
③focus情况下的输入框

所以针对这三种情况我们都需要使用样式穿透去去除边框
代码如下:

:deep(.el-textarea__inner){box-shadow: 0 0 0 0px;}:deep(.el-textarea__inner:hover){box-shadow: 0 0 0 0px;}:deep(.el-textarea__inner:focus){box-shadow: 0 0 0 0px;}

本文转载自: https://blog.csdn.net/weixin_44001222/article/details/128161575
版权归原作者 前端小王hs 所有, 如有侵权,请联系我们删除。

“Vue3:elementplus输入框去掉边框及缩放”的评论:

还没有评论