Bootstrap 4 .custom-select класс, показывающий два перекрывающихся стиля стрелок

Question

Привет, ребята, у меня возникла проблема при использовании класса .custom-select в Bootstrap-4. Кажется, что показаны два стиля стрелок, которые перекрываются

Смотрите изображение здесь

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
          <select class="custom-select">
          <option selected>Choose One...</option>
          <option value="1">Boots</option>
          <option value="2">Shoes</option>
          <option value="3">Feet</option>
          </select>
        </div>

Дополнительный CSS, который я добавил, должен был просто соответствовать другим формам, которые я использовал, проблема все еще сохраняется без любого из этих пользовательских стилей.

Любая помощь будет высоко ценится!

Answer 1

У меня была эта проблема при компиляции загрузочного SCSS с веб-пакетом в моем приложении e-create-реагировать-приложение.

Одна статья, которую я прочитал , которая, как говорят, включает

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

в конфигурации веб-пакета module.rules. Подобную документацию можно найти на странице sass-загрузчика Github .

Что решило проблему, так это конфигурацию веб-пакета, заданную на странице веб-пакета начальной загрузки :

{
  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' }
  ]
},

Я не уверен, что вы используете веб-пакет, но это может кому-то помочь.

Answer 2

Для пользователей Ember.js просто установите Autoprefixer, чтобы решить эту проблему:

ember install ember-cli-autoprefixer

Документы: https://github.com/kimroen/ember-cli-autoprefixer

Спасибо @Tom за подсказку!

Answer 3

Скорее всего, вам не хватает префиксных классов вендора для элемента .custom-select, поэтому вам нужно настроить Autoprefixer , чтобы это работало.

Авторефиксер добавит

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