How to remove the default arrow icon from a dropdown list (select element)?
There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:
select::-ms-expand {
display: none;
}
How to remove the arrow from a select element in Firefox
Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.
I've come up with a simple workaround.
This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.
Say this is your select menu:
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
And lets assume the css class 'css-select' is:
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.
Now to get this going in firefox, add a span element around with the class 'css-select-moz':
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.
I have only tested it in firefox (mac) version 18, and then 22 (after I updated).
All feedback is welcome.
Select removing dropdown arrow - Cross-browser
Here is the answer to my question :)
For Firefox use
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
For IE use
select::-ms-expand {
display: none;
}
Which -ms-expand is the arrow for Microsoft IE
How to remove arrow from select element
1) Add a pseudo element for your custom arrow icon and position it to the right of the select element such that it overlays the default arrow.
2) Set pointer-events: none;
on the pseudo element so that clicking on it doesn't hamper the drop down from opening.
DEMO
.select-style:after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px;
background-size: 26px 26px;
position: absolute;
right: 0;
top: 0;
pointer-events: none; /* <-- */
}
.select-style { border: 1px solid #333; width: auto; height: 32px; overflow: hidden; position: relative; margin: 40px;}.select-style:after { content: ''; display: inline-block; width: 30px; height: 30px; background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px; background-size: 26px 26px; position: absolute; right: 0; top: 0; pointer-events: none;}.select-style select { padding: 9px 8px 0 5px; width: 100%; border: none; font-size: 14px;}
<div class="select-style">
<select> <option value="volvo">Please select an option</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
How to adjust the arrow icon in a dropdown menu when the user clicks outside in angular?
In template you could use blur
listener, so when focus goes away from element (e.g clicking outside) it would turn the flag.
(blur)="menuExpandCategory = !menuExpandCategory"
Forked: https://stackblitz.com/edit/angular-v6heew?file=src%2Fapp%2Fapp.component.html
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>
Remove Select arrow on IE
In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before
css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js
or you can create your own in js.
Related Topics
Limit Number of Digits After Decimals in Text Input
How to Embed an External Webpage Without Using Iframe
Selecting an Option in a Dropdown List Using Request Parameters
Div Elements Overlapping Each Other
Create an Object for Google Chrome
How to Rotate the Block Every Time You Click on the Button
How to Switch Two Divs in HTML
Does Id Have to Be Unique in the Whole Page
Is There a ≪Meta≫ Tag to Turn Off Caching in All Browsers
Show Placeholder Text for Input Type Date
Html/Javascript One Click Print (No Dialogs)
Angular Detect When Scroll Reached Certain Point
How to Add HTML Line Break Within an Input Text Placeholder
How to Put Arrow Between Two Divs Using HTML and CSS