Software training courses are now available..!! email resume or Contact Us. C, JAVA, SQL, JS, HTML/CSS, PHP, Drupal, Wordpress

Remove drop-down arrow from html SELECT element using JQuery and CSS

I have gone through multiple postings and blogs for "How to remove the arrow from a <select> tag in Firefox & IE browsers". After Spending Couple of hours in North Web Studio I came through this approach of hiding SELECT arrow using Jquery and CSS. This solution will work Well in Chrome & Firefox as well as on IE browsers.

Idea behind this is as below:-

  1. Calculate Element Width (SELECT Element) using Jquery.
  2. Add a Wrapper Around Select Element and Keep overflow hidden for this element. Make sure that Width of this wrapper is appox. 25px less as that of SELECT Element. This could be easily done with Jquery.
  3. So Now Our Icon is Gone..! and it is time for adding our image icon on SELECT element...!!!
  4. Just add few simple lines for adding background and you are all Done..!!
  5. Make sure to use overflow hidden for outer wrapper,

Want to See the Code for Removing SELECT Arrow?

Here We go:-

 

/*
* Jquery Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
(function ($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width',$element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width',$wrap_width);
      });
    }
  };
})(jQuery);
  1. And here is Just two lines of CSS for Removing SELECT Arrow

?..!!

/*
* CSS Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
.nws-select{
  border:1px solid #ccc;
  overflow:hidden;
  background:url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select{
  border:none;
  background: transparent;
}

Key Notes in Removing Dropdown Arrow:-

  • Solution works on All Browsers IE, Chrome & Firefox
  • No need of Adding fixed Widths Hacks Using CSS. It is all being handled Dynamically using JQuery.!

Solution verified with IE9 & FF & Chrome Browsers..! And Sample Screenshots attached Below.

Don't Know What is Best Solution for you.? We are here to help you.! Contact Us