Bootstrap 4 .custom-select类显示两个重叠的箭头样式

Question

大家好，我在Bootstrap-4中使用.custom-select类时遇到了一个问题。似乎显示出两种重叠的箭头样式

在此处查看图片

entity.addEventListener("loaded", (e) => {
  console.log(e)
})

.custom-select {
  position: center;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  border-radiu: 2.5;
}

我添加的其他CSS只是为了匹配我一直在使用的其他表单，问题仍然存在，并且没有任何自定义样式。

任何帮助将不胜感激！

Answer 1

您很可能缺少.custom-select元素的供应商前缀类，因此您需要设置Autoprefixer才能使此工作正常。

自动前缀将添加

-webkit-appearance: none;
-moz-appearance: none;

Answer 2

在弹出的create-react-app应用程序中使用webpack编译引导SCSS时遇到了这个问题。

一个article I read被认为包含

{
  test: /\.scss$/,
  include: paths.appSrc,
  loaders: ["style-loader", "css-loader", "sass-loader"]
} 

在Webpack配置的module.rules中

。可以在the sass-loader Github page上找到类似的文档。

解决问题的是the bootstrap webpack page上给出的webpack配置：

{
  test: /\.(scss)$/,
  use: [
    // inject CSS to page
    { loader: 'style-loader' },

    // translates CSS into CommonJS modules
    { loader: 'css-loader' },

    // Run post css actions
    {
      loader: 'postcss-loader',
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    },
    // compiles Sass to CSS
    { loader: 'sass-loader' }
  ]
},

我不确定您是否正在使用webpack，但这可能会对某人有所帮助。

Answer 3

对于Ember.js用户，只需安装Autoprefixer即可解决此问题：

ember install ember-cli-autoprefixer

文档：https://github.com/kimroen/ember-cli-autoprefixer

感谢@Tom的提示！