Styled Select Menus


/ Published in: CSS
Save to your folder(s)

For those times when you just need a quickly styled select menu with css.


Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. .locator-form {
  3. margin:15px 0 0 22px;
  4.  
  5. }
  6. .locator-form .form-button {
  7. width:35px;
  8. height:27px;
  9. overflow:hidden;
  10. float:left;
  11. margin:0.5em 0 0.5em 4px;
  12. }
  13. .locator-form .form-button input {
  14. width:35px;
  15. height:27px;
  16. background:url("/assets/images/locator_submit.png") top left no-repeat;
  17. font-size:0;
  18. border:0;
  19. }
  20. .locator-form span {
  21. display:block;
  22. font-size:14px;
  23. line-height:18px;
  24. color:#e2dad0;
  25. }
  26.  
  27. .locator-form .form-item {
  28. background:url("/assets/images/locator_input.png") top left no-repeat;
  29. overflow: hidden;
  30. width:182px;
  31. height:28px;
  32. margin:.5em 0;
  33. float:left;
  34. }
  35. /* the key here is that the select-menu width is 20px+ wider with overflow:hidden to hide the arrow */
  36. .select-menu {
  37. background: none repeat scroll 0 0 transparent !important;
  38. border: 0 none;
  39. color: #8E8881;
  40. cursor: pointer;
  41. font-family: Times,Times New Roman,serif;
  42. font-size: 14px;
  43. height: 28px;
  44. margin: 5px 0;
  45. overflow: hidden;
  46. padding: 2px 0 0 10px;
  47. text-transform: uppercase;
  48. width: 220px;
  49. }
  50.  
  51. .select-menu option {
  52. background: none repeat scroll 0 0 #e1d9d0;
  53. border-top: 1px dotted #3e332b !important;
  54. display: block;
  55. font-weight: normal !important;
  56. margin: 0;
  57. padding: 5px;
  58. border-right:0;
  59. }
  60.  
  61. </style>
  62. <!-- this example has 3 select menus with button next to each -->
  63. <div class="locator-form">
  64. <span>Search by:</span>
  65. <form method="post" action="#" id="locator_form">
  66. <!-- brand -->
  67. <div class="form-item">
  68. <select name="brand" class="select-menu"><option>Brand</option><option>item 1</option></select>
  69. </div>
  70. <div class="form-button">
  71. <input type="button" name="brand_go" value="Go" />
  72. </div>
  73. <div class="clear"></div>
  74. <!-- style -->
  75. <div class="form-item">
  76. <select name="style" class="select-menu"><option>Style</option><option>item 1</option></select> <input type="button" name="style_go" value="Go" />
  77. </div>
  78. <div class="form-button">
  79. <input type="button" name="brand_go" value="Go" />
  80. </div>
  81. <div class="clear"></div>
  82. <!-- origin -->
  83. <div class="form-item">
  84. <select name="brand" class="select-menu"><option>Origin</option><option>item 1</option></select> <input type="button" name="style_go" value="Go" />
  85. </div>
  86. <div class="form-button">
  87. <input type="button" name="brand_go" value="Go" />
  88. </div>
  89.  
  90. </form>
  91. </div><!-- end locator_form -->

URL: http://bavotasan.com/2011/style-select-box-using-only-css/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.