web-dev-qa-db-ja.com

NgbDropdown：ドロップダウン矢印を削除

Angular 2アプリケーションでNgbDropdownコンポーネントを使用しています。正常に動作していますが、ボタンの右側に表示されている矢印を削除したいです。

<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>

ドロップダウンイメージ

cssangularng-bootstrapangular2-ui-bootstrap
16
JP4

解決

次のCSSスタイルを追加するだけで、.dropdown-toggle::after疑似要素のデフォルトスタイルを上書きできます。

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

どうして？

デフォルトでは、bootstrapは ::afterpseudo-element を介してドロップダウンコンポーネントに矢印を追加します。

これを行うと削除されます。

これはLIVE DEMOのデモです。

どのように解決しますか？

chrome devツールを使用して、要素を検査できます：

enter image description here

上記から、.dropdown-toggleクラスに疑似要素:: afterのスタイルセットがあることがわかります。要素のプロパティを変更してみましょう！この目的のために、displayプロパティをnoneに変更します。

enter image description here

疑似要素はもうありません!!：

enter image description here

28
cnorthfield

次のスタイルを追加して、デフォルトのスタイルを上書きします

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

LIVE DEMO

3
Aravind

Bootstrap 4では、$enable-caret SASS変数を宣言してfalseに設定することにより、キャレットと呼ばれるドロップダウン矢印を削除できます。

$enable-caret: false;

これは、Bootstrapの_variable.scssに設定されているtrueのデフォルト値を上書きします。

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

$enable-caret:                                true !default;

ただし、対応するCSSスタイルが完全に削除されることに注意してください。したがって、グローバルにキャレットを必要とせず、CSSペイロードを減らしたい場合は、これが最良のアプローチです。

1
Alexander Abakumov