How to Remove the Default Arrow Icon from a Dropdown List (Select Element)

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



Leave a reply



Submit