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

fruge365

已于 2023-03-18 21:37:42 修改

阅读量4.3k

点赞数 5

分类专栏： elementui 文章标签： vue.js javascript elementui

于 2022-09-01 14:17:52 首次发布

本文链接：https://blog.csdn.net/qq_46123200/article/details/126641906

版权

elementui 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ElementUI框架内修改input元素的placeholder字体颜色，通过使用CSS选择器`::placeholder`并结合浏览器特定前缀来实现。代码示例展示了在Vue2.x环境下，对input组件的placeholder颜色进行定制的方法，包括了Chrome、Firefox和IE的兼容性处理。

摘要由CSDN通过智能技术生成

文章目录

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

修改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>