风格选择菜单代码,JS代码库,德仔网

代码语言

代码分类

【JS】风格选择菜单

作者:步山 / 发布于2014/11/10/ 462


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

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　风格选择　

同语言下

可能有用的

步山贡献的其它代码(75)