Question

I am trying to ‘replace’ the button on select inputs. I have looked at the select replacement plugins in jquery but they are all a little bloated IMO. What I’d like to achieve is a simple span positioned over the dropdown button of the select box and when it is clicked make the select options drop.

Here is what I have:

$(document).ready(function(){

 $('select').after('<span class="cta arrow-down"></span>');
 $('input[type="submit"]').after('<span class="cta arrow-right"></span>');

 $('span.cta').each(function(){
  var $this = $(this);
  var $prev = $this.prev();
  var $dim = $prev.position();
  $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  $this.click(function(){
   $prev.trigger('click');
  });
 });

});

I have tried mousedown and also click and mousedown with triggerHandler calling a relevant func but to no avail…

Is this possible at all?

Answer 1

You can’t really do this in a cross-browser way, mainly due to IE ruining the fun for everyone. In early versions of IE the <select> is a control taken directly from Windows Forms (this is why it has z-index and styling issues), so many things aren’t standardized/supported…since IE can’t reliably do it.

To do what you’re after you’ll have to go the <select> replacement route, bloated or not…once again, IE is the main reason those plugins even exist.