首页修改el-input提示文字placeholder颜色

修改el-input提示文字placeholder颜色

时间: 2025-03-12 13:06:27 浏览: 73

### 修改 Element UI `el-input` 组件 Placeholder 文本颜色为了修改 Element UI 的 `el-input` 组件中的占位符文字颜色，可以通过自定义 CSS 或 SCSS 来实现。具体方法如下：对于不同浏览器的支持，需要编写特定的选择器来覆盖默认样式[^1]。 #### 使用纯CSS方式针对不同的浏览器引擎，需分别设置对应的伪类选择器以确保兼容性: ```css /* Chrome, Safari 和 Opera */ .el-input__inner::-webkit-input-placeholder { color: #999; } /* Firefox 4到18版本 */ .el-input__inner:-moz-placeholder { color: #999; } /* Firefox 19+ */ .el-input__inner::-moz-placeholder { color: #999; } /* IE 10+ */ .el-input__inner:-ms-input-placeholder { color: #999; } ``` 当输入框获得焦点时也可以单独设定placeholder的颜色变化效果: ```css /* 获取焦点后的颜色 */ .el-input__inner:focus::-webkit-input-placeholder { color: #EC5C2E; } .el-input__inner:focus::-moz-placeholder { color: #EC5C2E; } .el-input__inner:focus:-ms-input-placeholder { color: #EC5C2E; } ``` 如果项目中使用了预处理器如SCSS，则可以直接嵌套书写更简洁的代码结构[^3]: ```scss <style lang="scss"> .form-items { .el-input__inner, .el-date-editor .el-range-input { &::placeholder, &::-webkit-input-placeholder, /* WebKit 浏览器适配 */ &:-moz-placeholder, /* FireFox 4至18版适配 */ &::-moz-placeholder, /* FireFox 19+ 版适配 */ &:-ms-input-placeholder { /* IE 10及以上版本适配 */ color: #606266; } } } </style> ``` 需要注意的是，在某些情况下可能因为样式的优先级问题导致上述做法不起作用。此时可以尝试增加 `/deep/` 关键字或者调整父级容器内的其他样式属性来解决问题[^4]。

阅读全文