How to remove the default arrow icon from a dropdown list (select element)?
614,668
Solution 1
There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:
select::-ms-expand {
display: none;
}
Solution 2
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: '';
}
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
Solution 3
Simple way to remove drop down arrow from select
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
Solution 4
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/
Solution 5
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;
}
Author by
user2301515
Updated on July 24, 2022Comments
-
user2301515 almost 2 years
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?