element ui input type=textarea 高度自适应 不显示竖向滚动条
时间: 2024-09-15 11:03:48 浏览: 162
css textarea 高度自适应,无滚动条
Element UI 的 `el-input` 组件用于创建输入框,当你将其类型设置为 `type="textarea"` 时,你可以通过 CSS 来实现高度自适应以及隐藏滚动条的效果。以下是一个简单的示例:
1. **高度自适应**:你可以利用 CSS 的 `height` 和 `min-height` 属性,结合元素内容动态调整。例如:
```css
.el-input__textarea {
resize: none; /* 禁止文本区域的大小改变 */
min-height: 50px; /* 设置最小高度 */
height: auto !important; /* 保持高度自动伸缩,覆盖默认样式 */
}
```
2. **隐藏滚动条**:可以使用 `-ms-overflow-style` 或 `-webkit-scrollbar` 属性来隐藏滚动条,这里是针对 WebKit 内核浏览器如 Chrome、Safari 的实现:
```css
.el-input__textarea::-webkit-scrollbar {
display: none;
}
/* 对于老版本 IE 使用 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.el-input__textarea {
overflow: hidden;
}
}
```
将上述 CSS 样式添加到你的主题样式表或单独的类文件中,然后应用到 `el-input` 元素上。
阅读全文