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>
相关推荐
markyankee10134 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
UI设计和前端开发从业者2 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
翻滚吧键盘3 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956394 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常5 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee1017 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil8 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
速易达网络17 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码