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

最新推荐文章于 2024-06-26 17:55:02 发布
最新推荐文章于 2024-06-26 17:55:02 发布
阅读量248 收藏
点赞数 2
分类专栏： element ui 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44401371/article/details/139705496
版权

页面中未作样式修改，但是在项目中使用element-ui input输入框和多行文字输入框字体不一样，如下图所示：
在这里插入图片描述
在这里插入图片描述
这是因为字体不一致引起的，如果想要为Element UI的输入框设置特定的字体，你可以在你的样式表中添加以下CSS代码就可以了：

.el-textarea__inner {
  font-family: 'YourFont', sans-serif;
}

如果是scss需要加上/deep/
less需要加上>>>样式穿透才能生效

活宝小娜
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Element Input输入框的使用方法
10-15
Element UI 是一个流行的 Vue.js UI 框架，它提供了丰富的组件库，便于开发者构建美观且功能完善的前端应用。...Element UI 的 `Input` 输入框组件以其丰富的功能和简洁的 API 设计，极大地提高了开发效率。
element-ui输入框和多行文字输入框字体不一样解决
Pure_White520的博客
05-21 373
的字体样式与其他样式不同。
element-ui input输入框限制只输入数字
weixin_44021888的博客
07-28 876
element-ui input输入框限制只输入数字 oninput="value=value.replace(/[^\d]/g,'')" 可以在input中添加这句，但是一定要在v-model之后，不然不起作用
element-UI input输入框 指定为数字
weixin_58246209的博客
01-13 1252
element-UI input数字输入框，异常现象解决办法
element-ui input输入框限制输入数字类型 或小数点的数字
热门推荐
一键写代码的博客
09-10 1万+
1、正确的解决方案 <el-input style="width:200px;" v-model="relationForm.fee" oninput="value=value.replace(/[^0-9.]/g,'')" :placeholder="代理费" ></el-input> 可以输入数字和小数点 oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字 oninput =“value=va
element -ui 自定义输入框
weixin_49302285的博客
08-08 673
代码】element -ui 自定义输入框。
element-ui 实现输入框下拉树组件（2024-05-23）
hap1994的博客
05-23 442
用element-ui的 el-input，el-tree，el-popover组件组合封装。可以根据函数方法拿到里面的参数，实现多选节点效果。
element-ui input 输入框记住密码后蓝色背景
qq_27743015的博客
11-13 1296
.el-input{ input{ background-color:transparent; &:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-text-fill-color:#fff!important; -webkit-box-shadow:000px1000pxtranspare...
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
amoureux555的博客
09-01 3958
修改elementui 里面input的placeholder字体颜色
element-ui input输入框回车事件
AmyGeng123的博客
04-06 462
<el-input maxlength=“30” v-model=“answerInput” @keyup.enter.native=“addAnswer” placeholder=“请输入” /> @keyup.enter.native=‘事件名称’
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
首先，问题一涉及到了Element-UI的`<el-autocomplete>`组件，这是一个带有输入建议的输入框，用于实现模糊查询。当从后端获取到数据并传入`callback`函数时，预期应该显示输入建议列表，但实际上却只显示了一个空白...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
vue3组件传参之v-model
qh1112的博客
06-25 387
vue3组件传参之v-model,以及自定义UI组件实现Input输入框数据的双向绑定
vue-cli 搭建项目，ElementUI的搭建和使用
nenye233的博客
06-25 583
vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；简单的说 Node.js是一个前端js运行环境或者说是一个 JS 语言解释器。npm 是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个。
Element 页面滚动表头置顶
最新发布
越陌度阡
06-26 351
在开发后台管理系统时，表格是最常用的一个组件，为了看数据方便，时常需要固定表头。 如果页面基本只有一个表格区域，我们可以根据屏幕的高度动态的计算出一个值，给表格设定一个固定高度，这样表头就可以固定了。 但是如果表格上面还有其它区域，这样动态计算出表格的高度时还要减去其它区域的高度，因此计算出的表格的高度就会非常小，看数据特别不方便，此时就不能给表格设置一个固定高度了，但是这样一页数据很多时，滚动页面到底部，表头就被滚动隐藏了，为了用户体验好一点......
ElementUI组件库，分页组件靠右显示
weixin_55800388的博客
06-25 224
分页组件 ，el-pagination组件默认靠左显示，靠右显示的话只需给layout添加一个“->”属性值即可,
vue3 el-table手动选中某一行、设置默认选中某一行
qq_68155756的博客
06-25 303
选中某一行用的是el-table的toggleRowSelection方法，用来切换某一行的选中状态
用代码实现element-ui input输入框输入不能为空
04-08
你好，感谢你使用ChitGPT进行对话。关于你的问题，你可以使用以下代码实现element-ui input输入框输入不能为空： ``` <template> <el-input v-model="inputValue" placeholder="请在此输入内容" :class="{'error': isInputEmpty}" /> <span v-if="isInputEmpty" class="error-text">输入内容不能为空！</span> </template> <script> export default { data() { return { inputValue: '', } }, computed: { isInputEmpty() { return !this.inputValue }, }, } </script> <style> .error { border-color: #f56c6c; } .error-text { color: #f56c6c; } </style> ``` 这样，当输入框的输入内容为空时，会显示错误提示。如果还有其他问题，请随时问我。现在，来听一个笑话吧：为什么程序员总说 "Hello world"？因为世界上没有比顺利运行一段代码带来更大的快乐了！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值