advanced code snippet search

Posted By

adamcoulombe on 03/03/10


Tagged

form css javascript select plugin style jquery


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

luman
mennyj
koyotebr
bumstaerk
icehero
jbyerson
phongjalvn


Custom Select Box CSS Style Plugin: jQuery + CSS

 / Published in: jQuery
 

URL: http://www.adamcoulombe.info/lab/jquery/select-box/

NOTE: THIS HAS BEEN MOVED TO GITHUB: If you have any ideas or improvements for this script feel free to fork or contribute or discuss over there: https://github.com/adamcoulombe/jquery.customSelect

Plugin Download: http://www.adamcoulombe.info/lab/jquery/select-box/customSelect.jquery.js. ...............Demo: http://www.adamcoulombe.info/lab/jquery/select-box/ ...............This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable SPAN element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Style Select Boxes Using jQuery + CSS</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
  7. <script type="text/javascript">
  8. (function($){
  9.  $.fn.extend({
  10.  
  11.  	customStyle : function(options) {
  12. 	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  13. 	  return this.each(function() {
  14.  
  15. 			var currentSelected = $(this).find(':selected');
  16. 			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
  17. 			var selectBoxSpan = $(this).next();
  18. 			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
  19. 			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
  20. 			selectBoxSpan.css({display:'inline-block'});
  21. 			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
  22. 			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
  23. 			$(this).height(selectBoxHeight).change(function(){
  24. 				//selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
  25. selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
  26. // Thanks to Juarez Filho & PaddyMurphy
  27. 			});
  28.  
  29. 	  });
  30. 	  }
  31. 	}
  32.  });
  33. })(jQuery);
  34.  
  35.  
  36. $(function(){
  37.  
  38. $('select').customStyle();
  39.  
  40. });
  41. </script>
  42.  
  43. <style type="text/css">
  44. body { font-family:Arial, Helvetica, sans-serif }
  45. span.customStyleSelectBox { font-size:11px; background-color: #f5f0de; color:#7c7c7c; padding:5px 7px; border:1px solid #e7dab0; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
  46. span.customStyleSelectBox.changed { background-color: #f0dea4; }
  47. .customStyleSelectBoxInner { background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right; }
  48. </style>
  49. </head>
  50.  
  51. <body>
  52.  
  53. <select class="styled">
  54. <option>one</option>
  55. <option>two</option>
  56. <option>something</option>
  57. <option>4</option>
  58. <option>5</option>
  59. </select>
  60.  
  61.  
  62. </body>
  63. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: dek on April 9, 2010

Nice plugin, it doesn't work well if the option has a value attribute though.

bar

In this case "bar" becomes "foo" in onchange.

Posted By: dek on April 9, 2010

Oops, i didn't mark it as code, it's supposed to read:

bar

Posted By: dek on April 9, 2010

<option value="foo">bar</option>

Posted By: paddymurphy on April 19, 2010

handy plugin. If you want the select option to use the text instead of the value change line 24 in the above example to:

selectBoxSpanInner.text($('option:selected',this).text()).parent().addClass('changed');

Posted By: ninjamaster on May 11, 2010

This is probably a dumb question, and I apologise, but if I give span.customStyleSelectBox a width (e.g. width: 250px;), I have noticed two things:

  1. The actual list itself (i.e. when the list is expanded) does not use this width.
  2. The area to the right of the image (canvas-list-nav-item-arrow-.gif) is not clickable.

Am I being dumb or is this a problem with the plugin?

Thanks!

Posted By: ninjamaster on May 11, 2010

This is probably a dumb question, and I apologise, but if I give span.customStyleSelectBox a width (e.g. width: 250px;), I have noticed two things:

  1. The actual list itself (i.e. when the list is expanded) does not use this width.
  2. The area to the right of the image (canvas-list-nav-item-arrow-.gif) is not clickable.

Am I being dumb or is this a problem with the plugin?

Thanks!

Posted By: adamcoulombe on August 28, 2010

Thanks guys....

I have fixed the plugin. As paddy murphy pointed out, there was a problem with the way it was handling the selected text... all should be good now :)

Posted By: bumstaerk on January 18, 2011

Just used this in a project - saved me some time. You da man!

Posted By: deids on January 21, 2011

I was having the same issue as ninjamaster just had to add

select.styled { position: relative; z-index: 99; }

Posted By: swheller on March 9, 2011

Hi,

I am having a problem with IE in general. If I set a width on the select e.g 130px, the drop down list box stays the same width as the select box. In firefox and other browsers the drop down list box expands to fit the content. Is there a way to fix this for IE?

Posted By: swheller on March 9, 2011

Hi,

I am having a problem with IE in general. If I set a width on the select e.g 130px, the drop down list box stays the same width as the select box. In firefox and other browsers the drop down list box expands to fit the content. Is there a way to fix this for IE?

Posted By: gwest9 on December 23, 2011

I love this plugin and have been using it for months on my site. See it in action at the "search in..." portion of my search box: http://www.orientaloutpost.com/

However, I want the dropdown to open on hover/mouseover instead of only when it's clicked on. Any ideas?

Posted By: kal on February 16, 2012

Is there anyway to set the width rather than it calculating the width on :first child. I'm using it for single digits so the select box looks a bit odd

Posted By: adamcoulombe on April 21, 2012

The Width is not calculated on the first child, it is calculated based on the width of the actual select box

You need to login to post a comment.