【UI】修改element-ui input输入框placeholder提示信息、占位符的样式

fruge365

发布于 2025-12-15 09:41:59

1250

修改elementui 里面input的placeholder字体颜色

如何修改

代码如下：

::placeholder选中placeholder，重写样式（涉及到样式还要考虑到穿透::v-deep）
.el-input__inner::placeholder {
  color:  #31E5F5;
}

/* 考虑到兼容的话就是*/
/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color:  #31E5F5;
}
/* 火狐 */
.el-input__inner:-moz-placeholder {
  color:  #31E5F5;
}
/*ie*/
.el-input__inner:-ms-input-placeholder {
  color:  #31E5F5;
}

效果

案例展示

vue2.x代码

<template>
  <div class="test">
    HelloWorld
    <br />
    <br />
    <br />
    <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>

::v-deep .el-input--prefix .el-input__inner{
  color: blue;
}

::v-deep .el-input--prefix .el-input__inner::placeholder {
  color: red;
}

</style>