NgbDropdown: убрать стрелку раскрывающегося списка

Я использую компонент NgbDropdown в своем приложении Angular 2. Он работает нормально, однако я хочу убрать стрелку, которая отображается с правой стороны кнопки.

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Выпадающее изображение

Ответы

Ответ 1

Решение

Просто добавьте следующий стиль CSS, чтобы переопределить стиль по умолчанию псевдоэлемента .dropdown-toggle::after:

.dropdown-toggle::after {
    display:none;
}

Почему?

По умолчанию bootstrap добавляет стрелку к выпадающему компоненту через ::after pseudo-element.

Выполнение этого удаляет его.

Ниже показан LIVE DEMO.

Как вы это решаете?

Используя инструменты chrome dev, вы можете проверить элемент:

Из вышеизложенного видно, что существует набор стилей для псевдоэлемента:: after в классе .dropdown-toggle. Отпустите и измените свойства элемента! Для этого мы меняем свойство display на none:

Псевдоэлемент больше не существует!!:

Ответ 2

добавьте следующий стиль, чтобы переопределить значение по умолчанию

.dropdown-toggle::after{
    content:initial
 }

LIVE DEMO

Ответ 3

В Bootstrap 4 вы можете убрать стрелку раскрывающегося списка, которая называется caret, объявив переменную $enable-caret SASS и установив для нее значение false:

$enable-caret: false;

Это переопределяет значение по умолчанию true установленное в Bootstrap _variable.scss:

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;

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