Posted By

ryarwood on 06/09/11


Tagged

javascript forms jquery styling


Versions (?)

jNice pulldown example


 / Published in: jQuery
 

URL: http://www.lyoncommunities.com

jNice from http://plugins.jquery.com/project/jNice

  1. <style type="text/css">
  2. /* -------------
  3.  * Selects
  4.  * ------------- */
  5. .jNiceWrapper select {border:none;margin:0;padding:0;}
  6.  
  7. .jNiceSelectWrapper {
  8. width: 179px !important;
  9. height: 30px !important;
  10. left:0px;
  11. top:0px;
  12. z-index:3;
  13. position:absolute;
  14. background: url(http://70.32.85.132/images/elements/pulldown.gif) no-repeat left top;
  15. font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  16. font-size: 12px;/* Resize Font*/
  17. padding-left: 5px;
  18. }
  19.  
  20. .jNiceWrapper iframe {position:absolute;z-index:1;width:100%;left:0px;top:0px;}
  21.  
  22. .jNiceSelectWrapper .jNiceSelectText {
  23. height: 30px;
  24. line-height: 30px;
  25. padding: 0px 0px 0px 0px;
  26. overflow:hidden;float:none;position:absolute;z-index:100;
  27. }
  28.  
  29. .jNiceSelectWrapper ul {
  30. top: 30px;
  31. background-color: #FFF;
  32. border: solid 1px #CCC;
  33. height: 135px;
  34. position:absolute;
  35. left:0px;
  36. list-style:none;
  37. display: none;
  38. margin:0;
  39. padding:0;
  40. overflow-y:auto;
  41. z-index:100;
  42. width: 184px;
  43. }
  44.  
  45. .jNiceSelectWrapper li, .jNiceSelectWrapper ul {
  46. list-style: none;
  47. background-image: none;
  48. margin: 0px 0px 0px 0px;
  49. padding: 0px 0px 0px 0px;
  50. }
  51.  
  52. .jNiceSelectWrapper ul a {
  53. color:#716965;
  54. background-color: #FFF;
  55. font-size: 12px;
  56. font-family: Arial, Helvetica, sans-serif;
  57. display:block;padding:3px;text-decoration:none;
  58. }
  59.  
  60. .jNiceSelectWrapper ul a:hover { background:#e2e2e2; }
  61. .jNiceSelectWrapper ul a.selected {background: #e2e2e2;}
  62.  
  63. .jNiceFocus { border: dotted 1px #666666; }
  64.  
  65. .jNiceHidden {opacity:0;z-index:-1;position:relative;}
  66. .jNiceWrapper {position:relative;vertical-align:top;}
  67. .jNiceWrapper input {outline:none;moz-outline:none;}
  68. </style>
  69. <script type="text/javascript" src="/includes/js/jquery.jNice.js"></script>
  70.  
  71.  
  72. <form action="void.php" method="post" name="communityForm" id="communityForm" class="jNice">
  73. <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  74. <select name="communityPull" id="communityPull" style="width: 184px;">
  75. <option value="http://www.lyoncommunities.com/communities/">Select A Community</option>
  76. <option value="http://www.lyoncommunities.com/communities/welcome/1900-ocean">1900 Ocean</option>
  77. <option value="http://www.lyoncommunities.com/communities/welcome/the-arbors">The Arbors</option>
  78. <option value="http://www.lyoncommunities.com/communities/welcome/autumn-chase">Autumn Chase</option>
  79. <option value="http://www.lyoncommunities.com/communities/welcome/aviare">Aviare</option>
  80. <option value="http://www.lyoncommunities.com/communities/welcome/bay-tree">Bay Tree</option>
  81. <option value="http://www.lyoncommunities.com/communities/welcome/brentwood">Brentwood</option>
  82. <option value="http://www.lyoncommunities.com/communities/welcome/capistrano-pointe">Capistrano Pointe</option>
  83. <option value="http://www.lyoncommunities.com/communities/welcome/el-paradero">El Paradero</option>
  84. <option value="http://www.lyoncommunities.com/communities/welcome/forest-glen">Forest Glen</option>
  85. <option value="http://www.lyoncommunities.com/communities/welcome/the-fountains-at-sandy-springs">Fountains at Sandy Springs</option>
  86. <option value="http://www.lyoncommunities.com/communities/welcome/gallery421">gallery421</option>
  87. <option value="http://www.lyoncommunities.com/communities/welcome/haver-hill">Haver Hill</option>
  88. <option value="http://www.lyoncommunities.com/communities/welcome/huntington-continental">Huntington Continental</option>
  89. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-holcomb-bridge">Jasmine at Holcomb Bridge</option>
  90. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-marietta-crossing">Jasmine at Marietta Crossing</option>
  91. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-sandy-springs">Jasmine at Sandy Springs</option>
  92. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-the-galleria">Jasmine at the Galleria</option>
  93. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-winters-chapel">Jasmine at Winters Chapel</option>
  94. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-village">Jasmine Village</option>
  95. <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-woodlands">Jasmine Woodlands</option>
  96. <option value="http://www.lyoncommunities.com/communities/welcome/kimberly-woods">Kimberly Woods</option>
  97. <option value="http://www.lyoncommunities.com/communities/welcome/las-palmas">Las Palmas</option>
  98. <option value="http://www.lyoncommunities.com/communities/welcome/levanto">Levanto</option>
  99. <option value="http://www.lyoncommunities.com/communities/welcome/the-lofts-at-promenade">The Lofts at Promenade</option>
  100. <option value="http://www.lyoncommunities.com/communities/welcome/maplewood">Maplewood</option>
  101. <option value="http://www.lyoncommunities.com/communities/welcome/monarch-coast">Monarch Coast</option>
  102. <option value="http://www.lyoncommunities.com/communities/welcome/oak-creek">Oak Creek</option>
  103. <option value="http://www.lyoncommunities.com/communities/welcome/ocean-club">Ocean Club</option>
  104. <option value="http://www.lyoncommunities.com/communities/welcome/pacific-pointe">Pacific Pointe</option>
  105. <option value="http://www.lyoncommunities.com/communities/welcome/pebble-creek">Pebble Creek</option>
  106. <option value="http://www.lyoncommunities.com/communities/welcome/pruneyard-west">Pruneyard West</option>
  107. <option value="http://www.lyoncommunities.com/communities/welcome/renaissance">Renaissance</option>
  108. <option value="http://www.lyoncommunities.com/communities/welcome/sedona">Sedona</option>
  109. <option value="http://www.lyoncommunities.com/communities/welcome/serrano">Serrano</option>
  110. <option value="http://www.lyoncommunities.com/communities/welcome/shadowcreek">ShadowCreek</option>
  111. <option value="http://www.lyoncommunities.com/communities/welcome/st-claire">St. Claire</option>
  112. <option value="http://www.lyoncommunities.com/communities/welcome/stoneridge">Stoneridge</option>
  113. <option value="http://www.lyoncommunities.com/communities/welcome/trabuco-highlands">Trabuco Highlands</option>
  114. <option value="http://www.lyoncommunities.com/communities/welcome/villa-venetia">Villa Venetia</option>
  115. <option value="http://www.lyoncommunities.com/communities/welcome/the-vineyards">The Vineyards</option>
  116. <option value="http://www.lyoncommunities.com/communities/welcome/water-terrace">Water Terrace</option>
  117. </select>
  118. </div>
  119. <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  120. <select name="statePull" id="statePull" style="width: 184px;">
  121. <option value="http://www.lyoncommunities.com/communities/">Select A Region</option>
  122. <option value="http://www.lyoncommunities.com/communities/socal-orangecounty">So. Cal. - Orange County</option>
  123. <option value="http://www.lyoncommunities.com/communities/socal-losangeles/">So. Cal. - Los Angeles</option>
  124. <option value="http://www.lyoncommunities.com/communities/socal-sandiego/">So. Cal. - San Diego</option>
  125. <option value="http://www.lyoncommunities.com/communities/central-california/">Central California - Coastal</option>
  126. <option value="http://www.lyoncommunities.com/communities/nocal-east-bay/">No. Cal. - East Bay</option>
  127. <option value="http://www.lyoncommunities.com/communities/nocal-sacramento/">No. Cal. - Sacramento County</option>
  128. <option value="http://www.lyoncommunities.com/communities/nocal-santa-clara/">No. Cal. - Santa Clara County</option>
  129. <option value="http://www.lyoncommunities.com/communities/nocal-sonoma/">No. Cal. - Sonoma County</option>
  130. <option value="http://www.lyoncommunities.com/communities/colorado/">Colorado</option>
  131. <option value="http://www.lyoncommunities.com/communities/florida/">Florida</option>
  132. <option value="http://www.lyoncommunities.com/communities/georgia/">Georgia</option>
  133. </select>
  134. </div>
  135. </form>

Report this snippet  

You need to login to post a comment.