element的textarea字体与input字体不一致解决方案

最新推荐文章于 2024-05-21 15:04:44 发布

Sca_jie

最新推荐文章于 2024-05-21 15:04:44 发布

阅读量320

点赞数 1

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42966151/article/details/138354888

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文讨论了如何在El-textarea组件中应用scopedCSS样式，关注了`.el-textarea__inner`的选择器和字体家族设置，展示了如何定制文本区域的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现

<style scoped>
.el-textarea /deep/ .el-textarea__inner{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
</style>

效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sca_jie

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2 | vue3 - 解决html2canvas导出保存图片input输入框、textarea多行文本框内的文字，整体向上偏移或向下偏移、输入框文字错位没对齐的各种问题，生成图片后文字偏移上下！

高级前端工程师

10-23

1万+

vue2，vue3，html2canvas，html2canvas文字向下偏移兼容方法，位置偏移连续生成错乱，使用html2canvas时出现文字偏移的情况，生成图片文字偏下，截图后发现文本没有对齐怎么办，导出图片 input文字向上偏移，组件库Input输入框，保存到手机后发现文字跑偏了，生成图片偏移不完整，html2canvas图片的文字偏移，html2canvas截图后文字向下偏移解决，多行错位，竖排文本错乱，文字向上偏移，文字向左偏移，向右偏移了，文字靠顶部怎么办，截图中input框里的文字内容向上

vue-resumer 项目中 element-ui 遇到的 textarea autosize 问题

weixin_33895657的博客

08-09

3419

<el-input type="textarea" :autosize="{minRows:2}" v-model="amodel"></el-input> 如上边代码，element-ui 提供自动改变大小的 textarea 功能（这个功能详见）。遇到问题表现但是我的一个项目里，当 amodel 初始就有值...

参与评论您还未登录，请先登录后发表或查看评论

解决el-input输入框(text)与文本域(textarea)字体不一样问题

多看书少吃饭的博客

05-05

2602

解决el-input输入框(text)与文本域(textarea)字体不一样问题

输入框input和textarea文字不一样

m0_49494051的博客

06-06

351

文字样式问题

element-ui中的el-input 和el-textarea中的placeholder字体不一样

liuli0927的博客

07-14

945

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;

element-ui输入框和多行文字输入框字体不一样解决

Pure_White520的博客

05-21

624

的字体样式与其他样式不同。

element-ui 文本域字体不一样

wcy0112的博客

03-06

514

这是原生textarea默认字体问题，所以需要增加.el-textarea__inner字体属性。发现其他表单组件字体和文本域字体不一样。

浏览器兼容性问题及解决方案大汇总

qq_51179053的博客

07-03

3471

所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec

SoftUni-HTML-CSS-TasksAndExams:我的任务和考试HTML和CSS解决方案

03-08

5. **表单**：`<form>`、`<input>`、`<textarea>`、`<select>`和`<button>`用于用户交互，收集和提交数据。 6. **框架与布局**：`<iframe>`用于嵌入外部资源，`<div>`作为内容分组，`<span>`用于行内元素的分组。 ...

textarea高度改动

最新发布

12-27

还有一种巧妙的办法是引入不可见但具有相同字体样式的预备容器(`<pre>`)，它用于承载实际渲染前的内容副本以便精确测量所需的垂直空间占用情况。接着再把得到的结果应用回真实的表单控件上完成最终呈现。 ```html ;...

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

m0_67887734的博客

05-17

594

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

解决el-input输入框（text）和文本域（textarea）字体不一致问题

dd_lcdw的博客

01-15

1193

【代码】解决el-input输入框（text）和文本域（textarea）字体不一致问题。

动态修改el-input样式；动态修改elmentUI元素样式；css变量

i_am_a_div的博客

11-15

7808

动态修改el-input样式;动态修改elmentUI元素样式；css变量

el-input textarea输入框字体英文输入问题、回车提交、ctrl+enter换行等问题

yongyafang123的博客

02-26

4261

el-input 回车键、字体输入问题

笔记-vue el-input textarea时提示字字体

aliceyang2012的专栏

09-01

573

如图：“请输入内容”的字体和别的框有差异。

element-ui input 与textarea字体不一样

weixin_50013077的博客

12-12

778

解决Elementui输入框(text)与文本域(textarea)字体不一样问题

input和textarea中字体样式不同的解决方法