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

118

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>
Hongbo Miao
la source

Réponses:

177

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>
İlter Kağan Öcal
la source
3
Pour une raison quelconque, les autres solutions ne fonctionnaient pas pour moi. J'utilise Bootstrap 4. C'était la seule chose qui fonctionnait.
anonymousacorn
9
Cela n'a pas vraiment fonctionné pour moi. Le côté droit du bouton n'est plus arrondi.
Jace Browning
Plus simple que d'écrire du CSS personnalisé avec !important:)
hughjdavey
2
J'ai testé ça et ça marche plutôt bien! Testé dans FF, Chrome, IE et Opera - même sur les appareils mobiles Android avec navigateur intégré, pas de flèche ennuyeuse - merci beaucoup monsieur! AVIS: ne supprimez pas l'attribut "dropdown-toggle" complet, supprimez simplement l'attribut "-toggle", pour que votre style pour le menu déroulant ne disparaisse pas. Donc "dropdown-toggle" se transforme en "dropdown" - j'espère que cela vous aidera.
Kerim Yagmurcu
126

Avec css, vous pouvez simplement le faire:

.dropdown-toggle::after {
    display:none;
}
Clyff
la source
11
J'ai également dû inclure !importantpour que ce CSS personnalisé prenne effet.
Jace Browning
1
Cela aura un impact sur chaque liste déroulante utilisée dans d'autres pages si vous utilisez le même CSS.
Pavan Nath
ajoutez un préfixe supplémentaire pour ne désactiver que la flèche du bouton, par exemple: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg
35

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;
}
rybo111
la source
3
Meilleure réponse, je voudrais simplement ajouter des informations supplémentaires pour d'autres personnes, comme cette classe devrait être ajoutée avec dropdown-toggle.
eestein
12

supprimer la classe "dropdown-toggle"

Abdullah Alkurdi
la source
4
Cela ressemble plus à un commentaire
mrun
5

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; }
Logan Franklin
la source
4

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.

bensmithbwd
la source
2

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>
krekto
la source
1

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

.dropdown-toggle:after {
  border: none;
}
as de pique
la source
1

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

.btn .dropdown-toggle::after {
    display:none;
}
S. zbr
la source
0

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

jerryurenaa
la source
-1

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

Carl Leiner
la source
-2

Cela fonctionne sur bootsrap4 et ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}
alvic
la source
3
Copie de la réponse acceptée de deux ans, mais avec une faute de frappe.
miken32