### el-
textarea__inner
右下角样式调整或布局问题的解决方案
在 Element-UI 中，`el-
textarea__inner` 是文本域的核心输入框组件。若需要调整其
右下角的样式或行为，可以通过以下方法实现。
#### 1. 调整
右下角的字数限制显示位置
当使用 `show-word-limit` 属性时，字数限制会默认显示在文本域的
右下角。如果需要调整其位置，可以通过覆盖默认样式来实现：
```
css
/deep/ .
textarea-box .el-input__count {
position: absolute;
bottom: 0px !important; /* 调整垂直位置 */
right: 13px !important; /* 调整水平位置 */
}
```
上述代码通过设置 `position: absolute` 和调整 `bottom`、`right` 的值，可以灵活控制字数限制的位置[^1]。
#### 2.
去掉右下角的拉伸标志
如果希望
去掉文本域
右下角的拉伸标志（即调整大小的图标），可以通过以下样式实现：
```
css
/deep/ .inputDeep .el-
textarea__inner {
resize: none; /*
去掉拉伸功能 */
}
```
此代码通过设置 `resize: none` 禁用了文本域的调整大小功能[^2]。
#### 3. 修改
右下角滚动条样式
对于带有滚动条的文本域，可以对滚动条进行自定义样式调整，使其更美观：
```
css
.el-
textarea__inner::-webkit-scrollbar {
width: 6px; /* 设置滚动条宽度 */
height: 6px; /* 设置滚动条高度 */
}
.el-
textarea__inner::-webkit-scrollbar-thumb {
border-radius: 3px; /* 设置滚动条圆角 */
background-color: #c3c3c3; /* 设置滚动条颜色 */
}
.el-
textarea__inner::-webkit-scrollbar-track {
background-color: transparent; /* 设置滚动条轨道背景色 */
}
```
此代码通过伪元素 `::-webkit-scrollbar` 定义了滚动条的宽度、高度、颜色和圆角等属性[^3]。
#### 4. 全局禁用上下箭头（适用于 number 类型）
如果文本域被设置为 `
type="number"`，可能会出现上下箭头，默认情况下无法直接修改其行为。可以通过以下全局样式禁用这些箭头：
```
css
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
input[
type="number"] {
-moz-appearance: textfield;
}
```
虽然此代码主要用于数字输入框，但如果需要统一全局样式，也可以参考此方法[^4]。
#### 5. 修改文字样式
如果需要调整 `el-
textarea__inner` 内部文字的字体样式，可以在全局样式文件中添加以下代码：
```
css
.el-
textarea__inner {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
```
此代码定义了文本域内文字的字体族，确保在不同设备上显示一致[^5]。
### 示例代码
以下是一个完整的示例，结合了上述所有调整：
```html
<template>
<div class="custom-
textarea">
<el-input
type="
textarea"
v-model="
textareaValue"
maxlength="500"
show-word-limit
resize="none"
:rows="5"
class="
textarea-box"
></el-input>
</div>
</template>
<style>
.
textarea-box {
height: 140px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
/deep/ .
textarea-box .el-
textarea__inner {
height: 110px !important;
border: none !important;
}
/deep/ .
textarea-box .el-input__count {
position: absolute;
bottom: 0px !important;
right: 13px !important;
}
/deep/ .
textarea-box .el-
textarea__inner::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/deep/ .
textarea-box .el-
textarea__inner::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #c3c3c3;
}
/deep/ .
textarea-box .el-
textarea__inner::-webkit-scrollbar-track {
background-color: transparent;
}
</style>
```
本文探讨了在移动端UC浏览器中textarea元素显示异常的问题，即出现不应存在的三角符号。通过CSS样式调整，如禁用resize和移除边框，尝试解决此显示问题，但亲测后发现三角仍存在。
扫一扫
2781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
