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

Question

我已经尝试使用::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
                    }
                }]
        }]

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

希望这对你有用。

谢谢