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