如何修改el-form-item 的label的字体颜色

更新时间：2023年10月17日 09:40:05 作者：ChenMoJie_

这篇文章主要介绍了如何修改el-form-item 的label的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

修改el-form-item 的label 的字体颜色

修改前

      <el-form-item label="联系电话*">
        <div class="cont_left">
          <el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
        </div>
      </el-form-item>

修改后（去掉el-form-item label 属性）

     <el-form-item>
        <span slot="label">
      	  <span>金额</span>
          <span style="color: red">*</span>
        </span>
          <el-input v-model="form.money" placeholder="请输入" style="width: 60%;"  />
      </el-form-item>

element单独修改label的颜色

效果

步骤1

给label加单独的class 例：clickPostion

步骤2

css样式

 .clickPostion .el-form-item__label {
            color: #F56C6C;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3 AST解析器-源码解析
这篇文章我们从 ast 生成时调用的 baseParse 函数分析，再到 baseParse 返回 createRoot 的调用结果，一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下
2021-09-09
在vue中阻止浏览器后退的实例
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue.js划分组件的方法
这篇文章主要介绍了Vue.js划分组件的方法,需要的朋友可以参考下
2017-10-10
vuejs绑定class和style样式
本文主要介绍了vue.js实现绑定class和style样式的方法。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
vue实现双向数据绑定
这篇文章主要为大家详细介绍了vue实现双向数据绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue-router路由传参的两种方式详解(params和query)
vue-router 是一个基于vue.js的路由器,它提供了强大的路由功能,能够帮助开发者快速构建单页应用程序,本文将详细介绍 vue-router 路由传参的方法,包括路由传参的概念、路由传参的方法、路由传参的应用场景等,需要的朋友可以参考下
2024-12-12
深度解析 Vue3 的响应式机制
这篇文章主要介绍了深度解析 Vue3 的响应式机制，今天就带大家深入了解一下 Vue 3 的响应式机制，相信学完今天的内容，会对响应式机制有更深地体会；文章会结合代码示例，帮大家掌握响应式机制的进阶用法，让我们正式开始学习吧
2022-09-09
vue基于viewer实现的图片查看器功能
这篇文章主要介绍了vue基于viewer实现的图片查看器的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
浅谈vue方法内的方法使用this的问题
今天小编就为大家分享一篇浅谈vue方法内的方法使用this的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Element 默认勾选表格 toggleRowSelection的实现
这篇文章主要介绍了Element 默认勾选表格 toggleRowSelection的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09