0
我有一个像下面这样的搜索框,我使用bootstrap来给出一个灵活的布局。如何使用下面的设计,并确保我可以得到一个可拉伸的搜索框。带背景图形的搜索栏
我有一个像下面这样的搜索框,我使用bootstrap来给出一个灵活的布局。如何使用下面的设计,并确保我可以得到一个可拉伸的搜索框。带背景图形的搜索栏
你需要一个容器,把你的输入框,并把前和结束的div它。根据浏览器的兼容性,您可能需要添加更多的div,以确保您的输入框在IEX7/8等浏览器中正确显示。
所以你具备以下条件:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
通过下面的例子CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
陪同添加您的HTML部分这样
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
CSS部分,下载搜索框图像并用名称替换它
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
向我们展示您的代码“搜索框” –