Como remover a seta no menu suspenso no Bootstrap 4?


118

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>

Respostas:


177

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>

3
Por algum motivo, as outras soluções não estavam funcionando para mim. Estou executando o Bootstrap 4. Essa foi a única coisa que funcionou.
anonymousacorn

9
Isso não funcionou muito bem para mim. O lado direito do botão não é mais arredondado.
Jace Browning

Mais simples do que escrever CSS personalizado com !important:)
hughjdavey

2
Eu testei isso e funciona muito bem! Testado em FF, Chrome, IE e Opera - mesmo em dispositivos móveis Android com navegador embutido - nenhuma seta irritante - muito obrigado, senhor! AVISO: não remova o atributo "dropdown-toggle" completo, apenas remova o atributo "-toggle" para que o estilo do menu suspenso não seja eliminado. Portanto, "dropdown-toggle" muda para "dropdown" - espero que isso ajude.
Kerim Yagmurcu

126

Com css, você pode simplesmente fazer isso:

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

11
Eu também tive que incluir !importantpara que esse CSS personalizado tivesse efeito.
Jace Browning

1
Isso afetará todos os menus suspensos usados ​​em outras páginas se você estiver usando o mesmo CSS.
Pavan Nath de

adicione mais um prefixo para desativar apenas a seta do botão, por exemplo: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg

35

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

3
Melhor resposta, eu apenas adicionaria algumas informações extras para outras pessoas, como esta classe deve ser adicionada junto com dropdown-toggle.
eestein


5

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

4

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.


2

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>

1

Boostrap gera isso usando a borda CSS:

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

1

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

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

0

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


-1

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


-2

Isso funciona no bootsrap4 e no ng-bootstrap.

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

3
Copiar a resposta aceita da criança de dois anos, mas com um erro de digitação.
miken32
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.