Advanced Search

Custom Select Box CSS Style Plugin: jQuery + CSS

/ Published in: jQuery
Save to your folder(s)
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

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.