Bootstrap Remove Upward Arrow in Dropdown

How to remove the arrow in dropdown in Bootstrap 4?

Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows

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

overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.

Edit: Keep dropdown class if you want to keep border styling

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

How can I remove the arrow from drop down list in Bootstrap CSS?

From: https://getbootstrap.com/2.3.2/components.html#buttonDropdowns

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

If you remove <span class="caret"></span> the arrow is not shown.

Tried it using the dev. console in Chrome, and seems to work.

bootstrap remove upward arrow in dropdown

I would not recommend you to edit the bootstrap.css file. You can overwrite the styling in your custom stylesheet to hide the arrow for that component like this:

.dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

With this method you can even do the overwriting for a specific dropdown only. For example, if your dropdown was a child of an element with the id my_dropdown, you could do:

#my_dropdown .dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

This would allow you to have an arrow for other dropdowns, while hiding it for this specific dropdown.

NgbDropdown: remove dropdown arrow

Solution

Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:

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

Why?

By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.

Doing this removes it.

Here is a LIVE DEMO demonstrating it.

How do you work it out?

Using chrome dev tools you can inspect the element:

We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:

The pseudo-element is no longer there!!:

Bootstrap 4 remove caret from dropdown button

It's done in css. Do something like that:

.dropdown-toggle:after { content: none }

How to remove input-group select arrow in bootstrap 4?

If you simply want to remove the arrows, you should force apply background style for your custom-select class as those arrows are set as background. Try the below code as reference.

.custom-select{background: none !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><div class="form-group">      <label for="date">Date</label>      <div class"row">        <div class="col-5">          <input.....>        </div>        <div class="col-7">          <div class="input-group">            <select class="custom-select">              <option.....>            </select>          </div>        </div>      </div>    </div>

How to remove the arrow generated in the dropmenu Bootstrap 3.3.7

You can remove the <span class="caret"></span> or, via CSS, you could just hide it like this:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">     <div class="container-fluid">
        <div class="navbar-header">     <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">        <i class="glyphicon glyphicon-align-left"></i>            <span></span>     </button>     </div>
       <ul class="nav navbar-nav navbar-right">           <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Menu<span class="caret"></span></a>               <ul class="dropdown-menu">                 <li><a href="#">a</a></li>                 <li><a href="#">b</a></li>                 <li><a href="#">c</a></li>               </ul>           </li>        </ul>     </div> </nav>

How do I hide button and drop down arrow from Vue bootstrap dropdown?

You gotta override the style of the default classes responsible for what you see in the dropdown component, I don't know whether you want to change the dropdown permanently in the app or is it in just one case so either you give your dropdown a class name & use this styles or simply override the default classes in your stylesheet like this:

.btn-secondary { /* this is the button's class */
    color: #000;
    background-color: transparent;
    border-color: transparent;
}
.dropdown-toggle::after{ /*this is responsible for the arrow you see in the button*/
    display:none;
    }
    

.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover { /* this will change the button's hover & focus effect*/
    color: #000;
    background-color: #e7e7e7; /*just assumed you want it to be colored on hover IDK */
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { /*and apparently this is responsible for when the button is active*/
     color: #000; 
    background-color: #e7e7e7; 
}

How to remove arrow from dropdown in Bootstrap

You can check this css:

select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
   text-overflow: '';
   background: url("custom image") no-repeat right center;
}

select::-ms-expand {
    display: none;
}

---

Related Topics