时间戳

首页 > 解决方案 > css占位符选择器仅不适用于颜色

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

问题描述

我尝试过 ::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
                    }
                }]
        }]

标签： csswebpackplaceholdercss-loaderpostcss-loader

解决方案

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

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

希望这对你有用。

谢谢

推荐阅读