Custom Select Box CSS Style Plugin: jQuery + CSS


/ Published in: jQuery

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.


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.