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

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

Les réponses que j'ai trouvées pour Bootstrap 3 ne fonctionnent 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>

Supprimez simplement 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 classe .dropdown-toggle affecte toutes les listes déroulantes et vous voudrez peut-être conserver la flèche dans les autres boutons, c'est pourquoi cela me semble la solution la plus simple.

Modifier: conserver la classe déroulante si vous souhaitez conserver le style de la bordure

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

Avec css, vous pouvez simplement le faire:

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

Je ne recommande aucune des réponses existantes car:

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

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

• ::afterne couvre pas les variantes de liste déroulante (certaines utilisations ::before).

Utilisez une personnalisation .caret-offdans le même élément que votre .dropdown-toggleélément:

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

supprimer la classe "dropdown-toggle"

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

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

J'utilisais la réponse acceptée pendant un certain temps dans mon projet, mais je viens de tomber sur une variable utilisée par bootstrap :

$enable-caret: true !default;

Si vous définissez ceci sur false, le signe d'insertion sera supprimé sans avoir à faire de code personnalisé.

Mon projet était Ruby / Rails donc j'utilisais le bootstrap-rubygem . J'ai changé la variable en important un custom-variables.scssavec la variable ci-dessus définie sur false dans mon application.scss AVANT le bootstrap.scssfichier / fichiers.

Si vous supprimez la classe d'ajustement à bascule comme ci-dessous, tous les boutons de liste déroulante de votre système n'auront plus le curseur.

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

Mais peut-être que ce n'est pas ce que vous voulez, alors pour supprimer uniquement le bouton spécifique, nous allons insérer une classe appelée: remoecaret, et nous adapterons la classe: dropdown-toggle comme suit:

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

et notre html ressemble à quelque chose comme:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

Boostrap génère ceci en utilisant la bordure CSS:

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

Si vous ne voulez exactement que dans cette classe de boutons d'amorçage, créez:

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

avez-vous essayé tag = "a" dans la classe? il cache la flèche sans autre css.

Ajouter aucune flèche à la déclaration de classe de bascule déroulante

Cela fonctionne sur bootsrap4 et ng-bootstrap.

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