Revision: 54974
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 20, 2012 05:25 by crypticsoft
Initial Code
<style type="text/css"> .locator-form { margin:15px 0 0 22px; } .locator-form .form-button { width:35px; height:27px; overflow:hidden; float:left; margin:0.5em 0 0.5em 4px; } .locator-form .form-button input { width:35px; height:27px; background:url("/assets/images/locator_submit.png") top left no-repeat; font-size:0; border:0; } .locator-form span { display:block; font-size:14px; line-height:18px; color:#e2dad0; } .locator-form .form-item { background:url("/assets/images/locator_input.png") top left no-repeat; overflow: hidden; width:182px; height:28px; margin:.5em 0; float:left; } /* the key here is that the select-menu width is 20px+ wider with overflow:hidden to hide the arrow */ .select-menu { background: none repeat scroll 0 0 transparent !important; border: 0 none; color: #8E8881; cursor: pointer; font-family: Times,Times New Roman,serif; font-size: 14px; height: 28px; margin: 5px 0; overflow: hidden; padding: 2px 0 0 10px; text-transform: uppercase; width: 220px; } .select-menu option { background: none repeat scroll 0 0 #e1d9d0; border-top: 1px dotted #3e332b !important; display: block; font-weight: normal !important; margin: 0; padding: 5px; border-right:0; } </style> <!-- this example has 3 select menus with button next to each --> <div class="locator-form"> <span>Search by:</span> <form method="post" action="#" id="locator_form"> <!-- brand --> <div class="form-item"> <select name="brand" class="select-menu"><option>Brand</option><option>item 1</option></select> </div> <div class="form-button"> <input type="button" name="brand_go" value="Go" /> </div> <div class="clear"></div> <!-- style --> <div class="form-item"> <select name="style" class="select-menu"><option>Style</option><option>item 1</option></select> <input type="button" name="style_go" value="Go" /> </div> <div class="form-button"> <input type="button" name="brand_go" value="Go" /> </div> <div class="clear"></div> <!-- origin --> <div class="form-item"> <select name="brand" class="select-menu"><option>Origin</option><option>item 1</option></select> <input type="button" name="style_go" value="Go" /> </div> <div class="form-button"> <input type="button" name="brand_go" value="Go" /> </div> </form> </div><!-- end locator_form -->
Initial URL
http://bavotasan.com/2011/style-select-box-using-only-css/
Initial Description
For those times when you just need a quickly styled select menu with css.
Initial Title
Styled Select Menus
Initial Tags
Initial Language
CSS