CODEWITHSUNDEEP
cssreactjsbootstrap-4react-bootstrap
Cláudio Vitor Dantas
Cláudio Vitor Dantas

Reputation: 873

Remove dropdown arrow in React Bootstrap

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

enter image description here

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

Upvotes: 10

Views: 17578

Answers (2)

Zinox
Zinox

Reputation: 535

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.

Upvotes: 0

Bikas
Bikas

Reputation: 1436

Here is the CSS from the Bootstrap dropdown arrow:
enter image description here

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.

Upvotes: 18

Related Questions