css占位符选择器仅不适用于颜色

Posted 2023-03-05

【中文标题】css占位符选择器仅不适用于颜色

【英文标题】：css placeholder selector only not work for color

【发布时间】：2019-05-24 11:39:02

【问题描述】：

我尝试过 ::placeholder 或 ::-webkit-input-placeholder 选择器来更改占位符的颜色。但我发现只有设置颜色失败，其他属性如 text-align 或 font-weight 效果很好。 添加'！important'也不起作用。我使用过vue-loader && css-loader && autoprefixer。但它在codepen中运行良好，只需简单的输入和简单的css代码。 这是我的 webpack 配置

[
        
            test: /\.scss$/,
            use: ['style-loader','css-loader', 'sass-loader?sourceMap=true']
        ,
            test: /\.less$/,
            use: ['style-loader','css-loader', 'less-loader']
        ,
        
            test: /\.vue$/,
            use: [
                
                    loader: 'vue-loader',
                    options: 
                        loaders: 
                            scss: 'style-loader!css-loader!sass-loader',
                            css: 'style-loader!css-loader'
                        ,
                        postcss: [
                            require('autoprefixer')(
                                browsers: ['android >= 4', 'ChromeAndroid >= 46', 'ios >= 8']
                            )
                        ],
                        esModule: false
                    
                ]
        ]

【问题讨论】：

请分享您的简单代码。

请与 jsfiddle 或 codepen 分享您的代码

为我工作 (Chrome 71)。 jsbin.com/kalebogine/edit?html,css,output

@Amadan 这完全取决于浏览器...例如在 FF 47.0.2 中不起作用。

Change an HTML5 input's placeholder color with CSS的可能重复

【参考方案1】：

请尝试以下可能为占位符设置对齐和颜色的代码。

::-webkit-input-placeholder  /* Edge */
  color: red;
  text-align:center;


:-ms-input-placeholder  /* Internet Explorer */
  color: red;
  text-align:center;


::placeholder 
  color: red;
  text-align:center;

希望这对你有用。

谢谢

【讨论】：

我试过这样。但只有文本对齐有效，颜色不会改变

我已经用 w3school 演示检查了它并添加它正在工作

能否请您检查是否有其他 CSS 不存在相同的情况

【参考方案2】：

终于找到-webkit-text-fill-color哪个封面颜色了，不管用!important...