it-roy-ru.com

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

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

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

 enter image description here

.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, который я добавил, должен был просто соответствовать другим формам, которые я использовал, проблема все еще сохраняется без любого из этих пользовательских стилей.

Любая помощь приветствуется! 

4
Electric_Sheep01

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

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

-webkit-appearance: none;
-moz-appearance: none;
6
Tom

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

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

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

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

Решением проблемы была конфигурация веб-пакета, указанная на странице веб-пакета начальной загрузки :

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

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

1
Dave

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

ember install ember-cli-autoprefixer

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

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

0
Pedro