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.
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>
Bootstrap 4 remove caret from dropdown button
It's done in css. Do something like that:
.dropdown-toggle:after { content: none }
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.
How to remove the default arrow icon from a dropdown list (select element)?
If you use TailwindCSS
You may take advantage of the appearance-none
class.
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
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!!:
Changing Dropdown Icon on Bootstrap 4
You have to hide the caret icon like this..
.dropdown-toggle::after {
display: none;
}
Then add the fontawesome icon..
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
<i class="fa fa-heart"></i>
</button>
http://codeply.com/go/xd2b75iUbM
OR, just remove the dropdown-toggle
class from the button as it's only purpose seems to be showing the caret icon.
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
Polymer @Import Theme File with :Host in Styles Has No Affect
CSS Div Id Used Only Once Per Page
IE7 Absolute Element Appearing Behind Relative One
Clear Fix and Uncollapse Margins with CSS Without Side Effects
Can You Use Rgba Colours in Gradients Produced with Internet Explorer's Filter Property
Using Conditional Comments in HTML
Firefox Text-Overflow with Nowrap Ignored (Chrome Works)
Vertically Center HTML Element Within a Div of Dynamic Height
How to Deploy a Jekyll Site Locally with CSS, Js and Background Images Included
Add Image to Left of Text via CSS
Font Face Isn't Working in Iis 8.0
CSS "Fixed" Child Element Positions Relative to Parent Element Not to the Viewport, Why
Why the :Before and :After Pseudo-Elements Work Only in Firefox