Return to Snippet

Revision: 54974
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