怎么修改el-input-number 颜色
时间: 2025-01-09 10:18:56 浏览: 89
### 自定义 Element UI `el-input-number` 组件的颜色样式
为了自定义 `el-input-number` 的颜色样式,可以通过覆盖默认的 CSS 类来实现。具体方法是在项目的样式文件中添加特定的选择器,并应用所需的颜色属性。
对于全局样式的修改,可以直接在项目的主要样式表(如 `app.scss` 或者类似的全局样式文件)中加入如下代码:
```scss
/* 调整输入框背景色 */
.el-input-number .el-input__inner {
background-color: #f0f9eb;
}
/* 更改按钮区域的颜色 */
.el-input-number .el-input-number__decrease,
.el-input-number .el-input-number__increase {
color: #67c23a;
border-color: #e1f3d8;
}
```
如果希望这些更改仅作用于某个局部组件,则可以在该组件内部使用 `<style>` 标签并加上 `scoped` 属性以及 `/deep/` 来穿透 Vue 单文件组件的作用域限制[^2]。
```html
<template>
<el-input-number v-model="num" controls-position="right"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-input-number .el-input__inner {
/* 设置输入框内的文字颜色 */
color: red;
/* 输入框边框颜色 */
border-color: blue;
&:focus {
/* 当获得焦点时改变边框颜色 */
border-color: purple;
}
/* 改变光标的颜色 */
caret-color: orange;
}
/deep/ .el-input-number__decrease,
/deep/ .el-input-number__increase {
/* 控制按钮的文字颜色 */
color: teal;
/* 鼠标悬停时控制按钮的背景颜色 */
&:hover {
background-color: lightblue;
}
}
</style>
```
通过上述方式可以有效地调整 `el-input-number` 各部分的颜色和其他视觉效果,从而更好地匹配应用程序的设计需求。
阅读全文
相关推荐


















