Remove dropdown arrow in React Bootstrap

Question

i´m trying to remove the dropdown arrow with this following css, but it´s not making any effect.

.dropdown::after{
  display: none !important; 
}

here is the code

<NavDropdown className={classes.user} title="Componentes" id="collasible-nav-dropdown">
   <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
   <NavDropdown.Divider />
   <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>

Maybe, try this selector .dropdown-toggle:after to remove the arrow. — Junaid Faryad
– Junaid Faryad, Commented Oct 20, 2021 at 2:45
Junaid appears to be correct, more info here: github.com/react-bootstrap/react-bootstrap/issues/341 — Dan
– Dan, Commented Oct 20, 2021 at 2:50

Geoffrey Hale · Accepted Answer · 2022-01-15 21:29:22Z

18

Here is the CSS from the Bootstrap dropdown arrow:

So in order to overwrite it you need to use the corresponding CSS selector:

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

Note that maybe there is no need to include the !important.

edited Jan 15, 2022 at 21:29

Geoffrey Hale

11.7k5 gold badges46 silver badges49 bronze badges

answered Oct 20, 2021 at 2:55

Bikas

1,49612 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Over a year ago

How is the down arrow being specified? In the image you linked, it has content: "", but the empty string is somehow becoming a down arrow. I inspected the element but can't find any other ::after usages. Any idea what's going on?

Bikas Over a year ago

@Nathan The triangle is created by the borders' properties, not by the content value. You can see the details of how it works in this article: css-tricks.com/snippets/css/css-triangle

Zinox · Accepted Answer · 2024-11-29 17:18:44Z

0

Not sure if this is solved, I had a similar issue with select dropdown and it turns out the caret/arrow is a background-image and you can set it to background-image: none in CSS to remove it.

answered Nov 29, 2024 at 17:18

Zinox

5371 gold badge10 silver badges24 bronze badges

Collectives™ on Stack Overflow

Remove dropdown arrow in React Bootstrap

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related