Posted By

crypticsoft on 01/20/12

Tagged

Versions (?)

Last Edited at 01/20/12 05:25am

Statistics

Viewed 335 times

Favorited by 0 user(s)

Related snippets

Styled Select Menus

/ Published in: CSS

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

Highlighted TextExpand

}
.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>

	<div class="locator-form">
		<span>Search by:</span>
		<form method="post" action="#" id="locator_form">
			
			<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>
			
			<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>
			
			<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>

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.