el-input sets the background color and changes the style

<template slot="birthday">
      <el-input
        :class="age == false ? 'birthday' : ''"
        size="mini"
        disabled
        v-model="form.birthday"
      ></el-input>
    </template>
::v-deep .birthday .el-input__inner {
  background-color: yellow !important; 
  color: red !important;
}

Idea: In the elements of the browser console, it is found that el-input has two layers, and an input is set in the div. If you directly set the color in <el-input>, the effect cannot be achieved. Check and find that el-input__inner is the real input layer. Set a class name to locate this. The style style uses scoped, and adds deep and important to the css style

Effect:

 

Guess you like

Origin blog.csdn.net/gjylalaland/article/details/129863270