element-ui 修改el-form-item样式

文章目录

  • form结构
  • 修改el-form-item所有样式
  • 只修改label
  • 只修改content
  • 只修改input
  • 只修改button

form结构

html 复制代码
<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所有样式

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

只修改label

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

只修改content

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

只修改input

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

只修改button

css 复制代码
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
button {
font-size: 18px;
color: blue;
}
}
}
}
</style>
相关推荐
顽疲10 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
前端开发与ui设计的老司机9 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode10 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
前端世界11 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
武昌库里写JAVA13 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala14 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy14 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js