您的位置：首页 > 编程技术 > js  >  element-ui修改el-form-item样式的详细示例

element-ui修改el-form-item样式的详细示例

 更新时间：2022年11月15日 13:51  点击：815 作者：程序猿想成程序狮

form结构

<el-form :model="formData" label-width="80px">
  <el-form-item label="label1">
    <el-input v-model="formData.value1"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

修改el-form-item所有样式

<style lang="less" scoped>
.el-form {
  .el-form-item {
    /deep/ * {
      font-size: 18px;
      color: blue;
    }
  }
}
</style>

只修改label

<style lang="less" scoped>
.el-form {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-size: 18px;
      color: blue;
    }
  }
}
</style>

只修改content

<style lang="less" scoped>
.el-form {
  .el-form-item {
    /deep/ .el-form-item__content {
      * {
        font-size: 18px;
        color: blue;
      }
    }
  }
}
</style>

只修改input

<style lang="less" scoped>
.el-form {
  .el-form-item {
    /deep/ .el-form-item__content {
      input {
        font-size: 18px;
        color: blue;
      }
    }
  }
}
</style>

只修改button

<style lang="less" scoped>
.el-form {
  .el-form-item {
    /deep/ .el-form-item__content {
      button {
        font-size: 18px;
        color: blue;
      }
    }
  }
}
</style>

总结

到此这篇关于element-ui修改el-form-item样式的文章就介绍到这了,更多相关element-ui修改el-form-item样式内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/m0_47659279/article/details/126314410

[!--infotagslink--]

相关文章

  • 解决vant-UI库修改样式无效的问题

    这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03

  • vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14

  • elementui的el-popover修改样式不生效的解决

    在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下...2021-07-01

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-04

  • 详解element-ui 表单校验 Rules 配置 常用黑科技

    这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • 基于leaflet.js实现修改地图主题样式的流程分析

    这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16

  • 解析element-ui中upload组件传递文件及其他参数的问题

    这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法，需要的朋友可以参考下...2021-11-10

  • photoshop图层样式详解之斜面和浮雕详解

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下图层样式详解之斜面和浮雕，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14

  • AngularJS使用ng-class动态增减class样式的方法示例

    这篇文章主要介绍了AngularJS使用ng-class动态增减class样式的方法,结合具体实例形式分析了ng-class操作页面class样式的相关技巧,需要的朋友可以参考下...2017-05-22

  • jQuery zTree如何改变指定节点文本样式

    这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-17

  • 如何一步步基于element-ui封装查询组件

    这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下...2021-10-17

  • Vue中正确使用Element-UI组件的方法实例

    这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-13

  • PS怎么用图层样式制作好看的图案

    初学者怎么快速用ps制作出好看的图案呢？小编分享了一篇利用ps的图层样式制作好看图案的教程，操作简单初学者也能轻松学会，希望能对大家有所帮助！ 今天为大家介绍PS利...2016-12-15

  • .net 弹出消息框后导致页面样式变乱解决方法

    点击按钮，执行提交操作，弹出消息框后，页面的样式变乱，已经确定了不是css样式的问题，接下来与大家共同探讨下究竟是什么问题导致页面变乱...2021-09-22

  • 利用photoshop图层样式制作火焰字效果教程

    在利用photoshop图层样式制作火焰字效果过程中，用图层样式来制作初步的红色纹理字，然后增强边缘的高光，再用火焰素材叠加，就可以得到非常不错的效果 最终效果 ...2016-09-14

  • phpcms中的评论样式修改方法

    phpcms中自带的评论插件很好用，但是样式不太好看，今天小编给大家分享两种关于phpcms中的评论样式修改方法，一起看看吧...2016-11-01

  • jQuery为某个div加入行样式

    这篇文章主要为大家详细介绍了jQuery为某个div加入行样式的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-06-15

  • BootStrap入门教程(二)之固定的内置样式

    这篇文章主要介绍了BootStrap入门教程(二)之固定的内置样式的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧...2016-10-03