<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px;color: red!important;" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>字体红色无效果
时间: 2024-03-13 15:42:27 浏览: 22
如果仍然没有效果,那么可能是由于浏览器的安全策略导致样式无法生效,你可以尝试在CSS文件中设置样式,或者在页面中使用<style>标签来设置样式。例如:
```
<style>
.custom-input input {
color: red !important;
}
</style>
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>
```
这样应该可以将字体颜色设置为红色。
相关问题
<style> .custom-input input { color: red !important; } </style> <el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>这段代码红色字体没效果
这段代码应该是 Vue.js 模板语法,其中的样式是被 scoped 限制的,所以在全局样式中无法直接修改。
如果您想要修改这段代码中的颜色,可以在组件样式中增加一个非 scoped 的样式来覆盖掉原来的样式,例如:
```
<style scoped>
.custom-input input {
color: red !important;
}
.custom-input >>> .el-input__inner { /* 用 >>> 来穿透 scoped */
color: red !important;
}
</style>
<template>
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>
</template>
```
这里分别给 `.custom-input input` 和 `.custom-input >>> .el-input__inner` 添加了一个红色的 `color` 样式。注意第二个选择器中使用了 `>>>` 来穿透 scoped。
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px;color: red" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>字体颜色红色无效
如果你仍然无法在页面上看到红色字体,请检查是否有其他CSS样式覆盖了你的样式。你可以在浏览器中打开开发者工具,选择该元素并查看应用的CSS样式,可能会发现其他样式会覆盖你设置的颜色。你可以尝试使用 !important 关键字来强制应用你的样式,例如:style="width: 120px;margin-right: 20px;color: red !important;"。这样应该能够解决问题。