文章目录
- form结构
- 修改el-form-item所有样式
- 只修改label
- 只修改content
- 只修改input
- 只修改button
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>
![element-ui 修改el-form-item样式](https://img-blog.csdnimg.cn/img_convert/6aa145214d821161ce29c16b65217465.png)
只修改label
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__label {
font-size: 18px;
color: blue;
}
}
}
</style>
![element-ui 修改el-form-item样式](https://img-blog.csdnimg.cn/img_convert/67e37fecc6d4ea2f9759877cf5d43121.png)
只修改content
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
* {
font-size: 18px;
color: blue;
}
}
}
}
</style>
![element-ui 修改el-form-item样式](https://img-blog.csdnimg.cn/img_convert/7a0b2afbd2f54325a37ec70b8075686e.png)
只修改input
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
input {
font-size: 18px;
color: blue;
}
}
}
}
</style>
![element-ui 修改el-form-item样式](https://img-blog.csdnimg.cn/img_convert/f0a2e082303bce2654433e87232e2d3a.png)
只修改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样式](https://img-blog.csdnimg.cn/img_convert/4a42e3a6f93e49da76827d5d5a3b1bfe.png)