elementui 去掉el-input中textarea的右下角标、关闭高度调整功能

作者：System 时间：2024年09月04日分类：所有,elementui 字数：619

在Element UI中，el-input组件的type属性用于指定输入框类型，当设置为textarea时，会展示为多行文本输入框。如果你想去掉textarea右下角的标志（通常用于表示可以调整文本区域的大小），并关闭高度调整功能，可以通过CSS来实现。

首先，你需要确定这些标志是由哪些元素产生的，然后应用CSS样式来隐藏或移除它们。Element UI通常会生成一个额外的resize属性，你可以将它设置为none来关闭高度调整功能。

以下是一个示例CSS，用于隐藏调整大小的标志并关闭高度调整功能：




/* 隐藏右下角的标志 */
.el-input__textarea::-webkit-resizer {
  display: none;
}
 
/* 关闭高度调整功能 */
.el-input__textarea {
  resize: none;
}

将上述CSS添加到你的样式表中，应用到你的Vue组件，就可以实现去掉el-input中textarea的右下角标，并关闭高度调整功能。

请注意，这些CSS属性可能会因为不同浏览器的内部实现而有所不同，因此你可能需要针对不同的浏览器写不同的CSS规则。上述CSS是针对基于Webkit内核的浏览器（如Chrome、Safari），对于其他浏览器，可能需要不同的解决方案。