Question

我尝试使用:: placeholder或::-webkit-input-placeholder选择器来更改占位符的颜色，但是我发现只有设置颜色失败了，其他属性（如文本对齐或字体粗细）都能正常工作。添加'！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
                    }
                }]
        }]

Answer 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;
}

希望这对您有用。

谢谢

Answer 2

无论是否使用-webkit-text-fill-color，我终于找到!important遮盖颜色...

CSS占位符选择器仅对颜色不起作用

2 个答案: