I want to remove the dropdown arrow from a HTML <select>
element. For example:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
How to do it in Opera, Firefox and Internet Explorer?
This question is related to
html
css
drop-down-menu
html-select
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;
}
Works for all browsers and all versions:
JS
jQuery(document).ready(function () {
var widthOfSelect = $("#first").width();
widthOfSelect = widthOfSelect - 13;
//alert(widthOfSelect);
jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});
HTML
<select class="first" id="first">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
Try this it works for me,
<style>_x000D_
select{_x000D_
border: 0 !important; /*Removes border*/_x000D_
-webkit-appearance: none;_x000D_
-moz-appearance: none;_x000D_
appearance: none;_x000D_
text-overflow:'';_x000D_
text-indent: 0.01px; /* Removes default arrow from firefox*/_x000D_
text-overflow: ""; /*Removes default arrow from firefox*/_x000D_
}_x000D_
select::-ms-expand {_x000D_
display: none;_x000D_
}_x000D_
.select-wrapper_x000D_
{_x000D_
padding-left:0px;_x000D_
overflow:hidden;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div class="select-wrapper">_x000D_
<select> ... </select>_x000D_
</div>
_x000D_
You can not hide but using overflow hidden you can actually make it disappear.
The previously mentioned solutions work well with chrome but not on Firefox.
I found a Solution that works well both in Chrome and Firefox(not on IE). Add the following attributes to the CSS for your SELECTelement and adjust the margin-top to suit your needs.
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
Hope this helps :)
As I answered in Remove Select arrow on IE
In case you want to use the class and pseudo-class:
.simple-control
is your css class
:disabled
is pseudo class
select.simple-control:disabled{
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
Simple way to remove drop down arrow from select
select {_x000D_
/* for Firefox */_x000D_
-moz-appearance: none;_x000D_
/* for Chrome */_x000D_
-webkit-appearance: none;_x000D_
}_x000D_
_x000D_
/* For IE10 */_x000D_
select::-ms-expand {_x000D_
display: none;_x000D_
}
_x000D_
<select>_x000D_
<option>2000</option>_x000D_
<option>2001</option>_x000D_
<option>2002</option>_x000D_
</select>
_x000D_
Just wanted to complete the thread. To be very clear this does not works in IE9, however we can do it by little css trick.
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
.customselect {
width: 80px;
overflow: hidden;
border:1px solid;
}
.customselect select {
width: 100px;
border:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
there's a library called DropKick.js that replaces the normal select dropdowns with HTML/CSS so you can fully style and control them with javascript. http://dropkickjs.com/
Try This:
HTML:
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
CSS:
.customselect {
width: 70px;
overflow: hidden;
}
.customselect select {
width: 100px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
You cannot do this with a fully functional cross browser support.
Try taking a div of 50 pixels suppose and float a desired drop-down icon of your choice at the right of this
Now within that div, add the select tag with a width of 55 pixels maybe (something more than the container's width)
I think you'll get what you want.
In case you do not want any drop icon at the right, just do all the steps except for floating the image at the right. Set outline:0 on focus for the select tag. that's it
Try this :
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
}
JS Bin : http://jsbin.com/aniyu4/2/edit
If you use Internet Explorer :
select {
overflow:hidden;
width: 120%;
}
Or you can use Choosen : http://harvesthq.github.io/chosen/
Source: Stackoverflow.com