Comment supprimer la flèche dans la liste déroulante dans Bootstrap 4 ?

Question

J'utilise Bootstrap 4. J'ai essayé de supprimer la flèche dans la liste déroulante.

Le site réponses J'ai trouvé que pour Bootstrap 3 ne fonctionne plus.

Le jsfiddle est ici .

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Answer 1

Il suffit de supprimer la classe "dropdown-toggle" de l'élément. La liste déroulante fonctionnera toujours si vous avez l'attribut data-toggle comme suit

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Le remplacement des styles de la classe .dropdown-toggle affecte toutes les listes déroulantes et vous pouvez vouloir conserver la flèche dans d'autres boutons, c'est pourquoi cette solution me semble la plus simple.

Answer 2

Avec css, vous pouvez le faire :

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

Answer 3

Je ne recommande aucune des réponses existantes, car.. :

• .dropdown-toggle a plus de style que juste le caret. La suppression de la classe de l'élément entraîne problèmes de style .

• Remplacement de .dropdown-toggle n'a pas de sens. Ce n'est pas parce que vous n'avez pas besoin d'un signe d'insertion sur un élément particulier que vous n'en aurez pas besoin plus tard.

• ::after ne couvre pas variantes de liste déroulante (certains utilisent ::before ).

Utiliser un .caret-off à la place :

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

Answer 4

supprimez la classe "dropdown-toggle".

Answer 5

Si vous souhaitez remplacer la flèche par une autre icône (par exemple, FontAwesome), il vous suffit de supprimer la bordure du pseudo-élément .dropdown-toggle.

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