element-ui 中el-input以及el-date-picker的placeholder颜色修改

最新推荐文章于 2025-10-09 14:35:46 发布

原创最新推荐文章于 2025-10-09 14:35:46 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 同时被 3 个专栏收录

29 篇文章

订阅专栏

web相关

20 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了一种方法来解决客户反馈的默认输入框占位符颜色看不清楚的问题。通过使用SCSS语法，详细展示了如何针对不同浏览器进行占位符颜色的自定义设置。

客户觉得默认placeholder看不清，因此修改颜色，特此记录一下

原效果图
在这里插入图片描述
最终效果图

<style lang="scss">
.form-items {
  .el-input__inner, .el-date-editor .el-range-input {
    color: #409eff;
    &::placeholder {
        color: #606266;
    }

    &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #606266;
    }

    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #606266;
    }

    &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #606266;
    }

    &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #606266;
    }
  }
}
</style>