Come rimuovere la freccia nel menu a discesa in Bootstrap 4?

Sto usando Bootstrap 4. Ho provato a rimuovere la freccia nel menu a discesa.

Le risposte che ho trovato per Bootstrap 3 non funzionano più.

Il jsfiddle è qui .

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

Rimuovi semplicemente la classe "menu a discesa" dall'elemento. Il menu a discesa funzionerà ancora se hai l'attributo data-toggle come segue

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

l'override degli stili di classe .dropdown-toggle influisce su tutti i menu a discesa e potresti voler mantenere la freccia in altri pulsanti, ecco perché questa mi sembra la soluzione più semplice.

Modifica: mantieni la classe a discesa se desideri mantenere lo stile del bordo

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

Con CSS, potresti semplicemente farlo:

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

Non consiglio nessuna delle risposte esistenti perché:

• .dropdown-toggleha più stile che solo il cursore. La rimozione della classe dall'elemento causa problemi di stile .

• L'override .dropdown-togglenon ha senso. Solo perché non hai bisogno di un accento circonflesso su un elemento particolare, non significa che non ne avrai bisogno in seguito.

• ::afternon copre le varianti a discesa (alcuni usi ::before).

Usa una personalizzazione .caret-offnello stesso elemento del tuo .dropdown-toggleelemento:

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

rimuovere la classe "menu a discesa"

Se sei interessato a sostituire la freccia con un'altra icona (come FontAwesome) dovresti solo rimuovere il bordo sullo pseudo elemento di .dropdown-toggle

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

Stavo usando la risposta accettata per un bel po 'nel mio progetto, ma solo ora mi sono imbattuto in una variabile usata da bootstrap :

$enable-caret: true !default;

Se lo imposti su false, il cursore verrà rimosso senza dover eseguire alcun codice personalizzato.

Il mio progetto era Ruby / Rails, quindi stavo usando bootstrap-rubygem . Ho cambiato la variabile importando un custom-variables.scsscon la variabile sopra impostata su false nel mio application.scss PRIMA del bootstrap.scssfile / file.

Se rimuovi adatta la classe di attivazione / disattivazione a discesa come di seguito, tutti i pulsanti a discesa sul tuo sistema non avranno più il cursore.

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

Ma forse non è quello che vuoi, quindi per rimuovere solo il pulsante specifico, inseriremo una classe chiamata: remoecaret, e adatteremo la classe: dropdown-toggle come segue:

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

e il nostro html ha un aspetto simile a:

<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 lo genera utilizzando il bordo CSS:

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

Se vuoi esattamente solo in questa classe di pulsanti di bootstrap, fai:

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

hai provato tag = "a" all'interno della classe? nasconde la freccia senza ulteriori css.

Aggiungi nessuna freccia alla dichiarazione di classe di attivazione / disattivazione a discesa

Funziona su bootsrap4 e ng-bootstrap.

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