element-plus input 边框如何去除 以及 ifname HTML 内联框架元素

一、element-ui-plus

   去除select边框

   去除input 边框

   去除 textarea 的边框

   去除 ifname  的边框

二、使用步骤

1.input

代码如下：

: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

代码如下（示例）：

: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.Select

 而选择器与去除input 类似。 但是选中有个蓝色边框 去除方法如下。

:deep(.el-input .el-input__wrapper.is-focus) {
        box-shadow: none !important;
    }

4.Ifname 边框

<iframe src="https://#" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none;margin:0;padding:0;overflow:hidden;"></iframe>

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

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

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

第一个是去除缩放

对于这个缩放，我们可以使用输入框的自带属性resize

把resize的值设为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;
}