Posted By

sebikovacs on 06/23/10


Tagged

select


Versions (?)

Fancy select XHTML+CSS+jQuery


 / Published in: XHTML
 

The markup i use for customizing a select type input. I use this in conjunction with jQuery

  1. <style type="text/css">
  2. .select {
  3. position: relative;
  4. }
  5. .select span {
  6. width: 287px;
  7. height: 39px;
  8. display: block;
  9. line-height: 39px;
  10. padding: 0 20px 0 10px;
  11. overflow: hidden;
  12. cursor: default;
  13. }
  14. .select ul {
  15. position: absolute;
  16. left: 0;
  17. border-left: 1px solid #C2C9D5;
  18. border-right: 1px solid #C2C9D5;
  19. border-bottom: 1px solid #C2C9D5;
  20. background: #FFFFFF;
  21. top: 39px;
  22. left: 2px;
  23. display: none;
  24. }
  25. .select ul li {
  26. border-bottom: 1px solid #C2C9D5;
  27. clear:both;
  28. }
  29. .select ul a {
  30. float: left;
  31. padding: 9px 0 9px 20px;
  32. }
  33. .select ul a:hover {
  34. background: #E9EFFB;
  35. }
  36. <script type="text/javascript">
  37. //fancy select(remember you need jQuery for this to work)
  38. $('.select a.icon').click(function(){
  39. var parinte = $(this).parent();
  40. var rel = $(this).attr('rel');
  41. if(!rel){
  42. $('ul',parinte).show();
  43. $(this).attr('rel','1');
  44. }else if(rel == 1){
  45. $('ul',parinte).hide();
  46. $(this).removeAttr('rel');
  47. }
  48. return false;
  49. });
  50. $('.select ul a').click(function(){
  51. var textul = $(this).html();
  52. var parinte = $(this).parent().parent().parent();
  53. $('a.icon',parinte).html(textul).removeAttr('rel');
  54. $(this).parent().parent().hide();
  55. return false;
  56. });
  57.  
  58. <div class="select">
  59. <a href="" title="" class="icon">select something</a>
  60. <ul class="menu">
  61. <li><a href="" title="">select1</a></li>
  62. <li><a href="" title="">select2</a></li>
  63. <li><a href="" title="">select3</a></li>
  64. </ul>
  65. </div><!--/select-->

Report this snippet  

You need to login to post a comment.