Posted By

ryarwood on 01/30/12


Tagged

form javascript jquery selectbox


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

AllKnightAccess


jQuery Style Select Boxes


 / Published in: JavaScript
 

  1. (function($){
  2. $.fn.extend({
  3.  
  4. customStyle : function(options) {
  5. if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  6. return this.each(function() {
  7.  
  8. var currentSelected = $(this).find(':selected');
  9. $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
  10. var selectBoxSpan = $(this).next();
  11. var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
  12. var selectBoxSpanInner = selectBoxSpan.find(':first-child');
  13. selectBoxSpan.css({display:'inline-block'});
  14. selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
  15. var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
  16. $(this).height(selectBoxHeight).change(function(){
  17. selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
  18. });
  19.  
  20. });
  21. }
  22. }
  23. });
  24. })(jQuery);
  25.  
  26.  
  27. $(function(){
  28.  
  29. $('select.jumpdrop').customStyle();
  30.  
  31. });

Report this snippet  

You need to login to post a comment.