el-input type=‘textarea‘ 样式难修改的问题

已于 2024-09-02 09:55:45 修改
阅读量803 收藏 5
点赞数 15
文章标签： elementui
于 2024-08-08 10:30:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39016177/article/details/141020046
版权

el-input type=‘textarea’ 样式难修改的问题

1.el-inut type=''textarea 官网示例

在这里插入图片描述

2.修改为具体需要的样式-- 代码scss +vue3

:deep(.el-textarea__inner) {
    background-color: #F7F7F7 !important;
    border: none !important;
    border-radius: 20px;
    border: none !important;
    box-shadow: none !important;
}

3.查看效果

在这里插入图片描述

结束—
诸君有用且点赞

ElementUi中ref和id两种方式或者dom进行样式更改；el-input，el-select，el-textarea通过ref获取改变边框等样式，及通过id获取改变样式
qq_41180882的博客
10-19 1402
ref和id两种方式或者dom进行样式更改在需要的地方通过ref设置好名称，然后通过array拿到对应需要改变的ref，通过遍历对每个进行样式更改，通过refs拿到的进行验证，判断是输入框还是文本域还是选择框，然后做样式更改。利用ref获取到单独的框，然后通过末班字符串形式遍历加上去改变样式，也可以自己打印refs，可以看看对比取消样式改变。
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
放弃不难，但坚持一定很酷！
03-07 2523
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
elemenPlus中，如何去掉el-input中 文本域 textarea自带的边框和角标
最新发布
weixin_45636198的博客
04-10 640
el-input:style="{}"placeholder="请输入"/>
vue+element中，el-input type=“textarea“ 实现自定义末端行数限制提示
ilcn1949的博客
08-16 1698
根据element 官网上的用法：有个属性是show-word-limit配合:maxlength="10000"使用，就会出现在文本框的右下角提示字数显示：已输入/最大可输入字符。但是我发现如果要实现需求图中的效果，这个属性是没办法使用的，然后看了一下相关的源码，textarea是没有这种的插槽。于是另辟蹊径，发现了一个新的写法，话不多说，直接上代码片段1。
elementui el-input输入框类型为textarea时，将输入的数据保存换行和空格，并展示换行和空格
DarlingYL的博客
03-27 4288
el-input输入框类型为textarea时，如果不做数据处理，是不会保存换行和空格的说输入了换行，但是保存数据后不会进行换行，需要保存输入的换行。
el-input type=“textarea” 高度问题
weixin_64372719的博客
03-16 2770
el-input type=“textarea” 高度问题
el-input type=‘textarea’后高度设置
m0_73216899的博客
03-07 3105
wu
如何更改<el-input type=textarea选中是边框颜色
11-30
在Element UI的`<el-input>`组件中，如果你想要改变文本区域（textarea）的选中文字边框颜色，你需要通过自定义样式来实现。你可以直接给`.el-textarea.is-focused`这个CSS类添加样式，因为这是Input在获取焦点时...
el-input type="textarea" 设置高度
03-23
在 Element UI 的 `el-input` 组件中，可以通过设置 `type="textarea"` 将输入框转换为多行文本区域。为了进一步控制该文本区域的高度，可以使用以下方法： #### 方法一：通过原生属性 `rows` 可以直接利用 `rows` ...
Element-UI el-input组件type=“number“的样式修改
Jana Jing的分享
07-14 6346
el-input组件
<el-input type=“textarea” />文本输入框的右下角三个斜线的图标怎么去掉
12-06
在Element UI中，`<el-input type="textarea" />`文本输入框的右下角默认会显示一个可调整大小的图标（三个斜线）。如果你想去掉这个图标，可以使用以下方法： 1. 使用CSS样式覆盖默认样式： ```html <el-input ...
el-input type=‘textarea’后高度自适应
weixin_61397543的博客
12-04 2732
可以配合css属性resize: none;
将el-input框设置为 textarea （ElementUI）
qq_51196135的博客
02-16 8398
1、示例 2代码 其中：就是在el-input中添加了一些属性： ①：type="textarea" //将input变为文本框 ②：rows="4" //设置行高 ③：placeholder="描述" //提示文本 ...
设置＜el-input type=“textarea“/＞高度
guapilixianghe的博客
03-24 9951
.el-textarea{ height:88px; :deep(.el-textarea__inner){ height: 88px; } }:deep(.el-input__wrapper){ font-size: 14px; width:100%; height:32px; }
element中＜el-input type=“textarea“ /＞高度自适应
文龙刚的博客
06-07 5683
element中高度自适应
修改el-textarea内容的文字样式
Apple23233的博客
04-26 986
【代码】修改el-textarea内容的文字样式。
修改类型为textarea的el-input的默认高度，enter换行输入时才加高到一定高度(vue2语法)
weixin_60886885的博客
05-23 3190
修改类型为textarea的el-input的默认高度，enter换行输入时才加高到一定高度(vue2语法)
element ui el-input输入框type=textarea禁止上下拖动
cnfabu的博客
08-12 944
设置resize="none"
el-input type=‘textarea’后高度 height 设置 - 当 :row 属性无效时
Muxiu
07-11 2286
el-input type=‘textarea’后高度设置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_39016177

你的鼓励将是我最大的创作动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值