element中input type 类型设置为textarea之后，字体不一致了

已于 2024-06-01 08:40:04 修改
阅读量422 收藏
点赞数 3
分类专栏： element ui的小bug 文章标签： javascript 前端 html vue elementui
于 2024-05-17 16:14:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67887734/article/details/139007410
版权

解决：穿透更改样式 ，复制一下样式代码直接使用即可。

::v-deep .el-textarea__inner {

  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",

    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

}

菜鸡展翅
关注
专栏目录
element-ui中的el-input 和el-textarea中的placeholder字体不一样
liuli0927的博客
07-14 784
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
vue-resumer 项目中 element-ui 遇到的 textarea autosize 问题
weixin_33895657的博客
08-09 3234
<el-input type="textarea" :autosize="{minRows:2}" v-model="amodel"></el-input> 如上边代码，element-ui 提供自动改变大小的 textarea 功能（这个功能详见）。 遇到问题表现 但是我的一个项目里，当 amodel 初始就有值...
解决el-input输入框(text)与文本域(textarea)字体不一样问题
多看书少吃饭的博客
05-05 2322
解决el-input输入框(text)与文本域(textarea)字体不一样问题
vue+element中，el-input type=“textarea“ 实现自定义末端行数限制提示
ilcn1949的博客
08-16 866
根据element 官网上的用法：有个属性是show-word-limit配合:maxlength="10000"使用，就会出现在文本框的右下角提示字数显示：已输入/最大可输入字符。但是我发现如果要实现需求图中的效果，这个属性是没办法使用的，然后看了一下相关的源码，textarea是没有这种的插槽。于是另辟蹊径，发现了一个新的写法，话不多说，直接上代码片段1。
element-ui 文本域字体不一样
wcy0112的博客
03-06 357
这是原生textarea默认字体问题，所以需要增加.el-textarea__inner字体属性。发现其他表单组件字体和文本域字体不一样。
element的textarea字体与input字体不一致解决方案
weixin_42966151的博客
04-30 251
【代码】element的textarea字体与input字体不一致解决方案。
Elementui输入框(text)与文本域(textarea)字体不一样
前端的路上
04-26 885
.el-textarea__inner{ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; }
输入框input和textarea文字不一样
m0_49494051的博客
06-06 320
文字样式问题
el-input type=“textarea” 高度问题
weixin_64372719的博客
03-16 2520
el-input type=“textarea” 高度问题
input、textarea宽设定100%时超出父容器
weixin_44472100的博客
08-17 1382
<form style="width: 333px;border: 1px red solid;"> <input type="text" placeholder="input>text" style="width:100%;"><br> <textarea placeholder="textarea" style="width:100%;"></textarea><br> </form> 父级容器f
vue 一键复制input中的文本内容
记录技术的小本本
03-11 503
vue 一键复制input中的文本内容 1、页面设置 <el-input v-model="copytext" disabled></el-input> <el-button ref="copy" type="primary" :data-clipboard-text="copytext" @click="copy" id="copybuttons" class="copybutton">一键复制</el-button> 2、js设置 copy(){
element-ui文本域字体
08-31
- *2* [element-ui input 与textarea字体不一样](https://blog.csdn.net/weixin_50013077/article/details/128290535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...
关于input和input ＜textarea＞文字显示不一样的问题
ymmnmmnm的博客
10-23 395
npm i less less-loader 当然有less 必得下载less-loader。在工作中遇到了，顺便记录一下，以后用的到。2. 顺便也记录一些其他的可以解决的小问题。1.下载less依赖，应该也可以不下载。
element ui el-input输入框type=textarea禁止上下拖动
cnfabu的博客
08-12 450
设置resize="none"
设置＜el-input type=“textarea“/＞高度
guapilixianghe的博客
03-24 9192
.el-textarea{ height:88px; :deep(.el-textarea__inner){ height: 88px; } }:deep(.el-input__wrapper){ font-size: 14px; width:100%; height:32px; }
el-input type=‘textarea’后高度自适应
weixin_61397543的博客
12-04 2348
可以配合css属性resize: none;
解决el-input输入框（text）和文本域（textarea）字体不一致问题
dd_lcdw的博客
01-15 971
【代码】解决el-input输入框（text）和文本域（textarea）字体不一致问题。
el-input type=‘textarea’后高度设置
热门推荐
我的代码没有bug的博客
07-15 1万+
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。 关键代码：:autosize="{ minRows: 5, maxRows: 5}" <el-input type="textarea" :maxlength="500" :autosize="{ minRows: 5, maxRows: 5}"></el-input> ...
element ui input type=textarea 高度自适应 不显示竖向滚动条
最新发布
09-15
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` 元素上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值