In vue, input changes background color according to value.

1. First define two different

.null-input .el-input__inner {
background-color: rgba(255, 255, 255, 0.8); 
color: #525661; 
font-size: 16px;
}

.no-null-input .el-input__inner { 
background-color: rgba(255, 255, 255, 1); 
color: #524F52; 
font-size: 16px;
}

2. Control the input class according to: class

:class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" @change="changeCss"

3. Judging the input value according to the change method and then control the isNullInput value

changeCss(val) { 
if (val === "") { 
 = true; 
} else { 
 = false; 
} 
(); 
}

But the color of the placeholder cannot be changed

Try the online method but it has no effect - online method:input::-webkit-input-placeholder

The example of input changing background color based on value in the above vue is all the content I share with you. I hope it can give you a reference and I hope you support me more.