Como remover a seta no menu suspenso no Bootstrap 4?

Estou usando o Bootstrap 4. Tentei remover a seta no menu suspenso.

As respostas que encontrei para o Bootstrap 3 não funcionam mais.

O jsfiddle está aqui .

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

Simplesmente remova a classe "dropdown-toggle" do elemento. A lista suspensa ainda funcionará se você tiver o atributo data-toggle da seguinte forma

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

substituir os estilos de classe .dropdown-toggle afeta todos os menus suspensos e você pode querer manter a seta em outros botões, é por isso que esta me parece a solução mais simples.

Editar: Manter a classe suspensa se quiser manter o estilo das bordas

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

Com css, você pode simplesmente fazer isso:

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

Não recomendo nenhuma das respostas existentes porque:

• .dropdown-toggletem mais estilo do que apenas o cursor. Remover a classe do elemento causa problemas de estilo .

• Substituir .dropdown-togglenão faz sentido. Só porque você não precisa de um cursor em algum elemento específico, não significa que não precisará de um mais tarde.

• ::afternão cobre variantes suspensas (alguns usam ::before).

Use um personalizado .caret-offno mesmo elemento do seu .dropdown-toggleelemento:

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

remova a classe "dropdown-toggle"

Se você estiver interessado em substituir a seta por outro ícone (como FontAwesome), você só precisa remover a borda do pseudo elemento de .dropdown-toggle

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

Eu estava usando a resposta aceita por um bom tempo em meu projeto, mas só agora me deparei com uma variável usada pelo bootstrap :

$enable-caret: true !default;

Se você definir isso como falso, o acento circunflexo será removido sem a necessidade de qualquer código personalizado.

Meu projeto era Ruby / Rails então estava usando o bootstrap-rubygem . Eu mudei a variável importando um custom-variables.scsscom a variável acima definida como false no meu application.scss ANTES do bootstrap.scssarquivo / arquivos.

Se você remover o ajuste da classe suspensa-alternar conforme abaixo, todos os botões suspensos em seu sistema não terão mais o acento circunflexo.

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

Mas talvez não seja isso que você deseja, então, para remover apenas o botão específico, vamos inserir uma classe chamada: remoecaret, e ajustaremos a classe: dropdown-toggle da seguinte maneira:

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

e nosso html se parece com:

<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 gera isso usando a borda CSS:

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

Se você quiser exatamente apenas nesta classe de botão de bootstrap, faça:

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

você tentou tag = "a" dentro da classe? ele esconde a flecha sem mais css.

Adicionar nenhuma seta para a declaração de classe de alternância suspensa

Isso funciona no bootsrap4 e no ng-bootstrap.

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