Removing Arrows From <SELECT> Tag with CSS
If you want to remove dropdown arrow from select in html, it's easy enough to implement with CSS.
Let's see the examples:
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result 1: Standard <SELECT>
Result 1: Customized <SELECT>
- <style type="text/css">
- SELECT.no_arrows {
- width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
- background:transparent; -webkit-appearance:none;
- text-indent:0.01px; text-overflow:""; color:#444;
- }
- SELECT.no_arrows:focus {
- box-shadow:none;
- }
- SELECT.no_arrows::-ms-expand{
- /* for IE 10+ */
- display:none;
- }
- @-moz-document url-prefix(){
- /* for FF */
- SELECT.no_arrows {
- width:auto; padding-top:2px; margin:0 0 0 5px;
- -webkit-appearance: none; -moz-appearance: none;
- }
- }
- </style>
Result 1: Standard <SELECT>
Result 1: Customized <SELECT>