搜索栏与背景图形

Question

我有一个类似下面的搜索框，我使用bootstrap来提供灵活的布局。如何使用如下设计，并确保我可以获得一个可伸缩的搜索框。

Answer 1

您需要一个容器来放入输入框，并将前端和后端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); }

Answer 2

像这样添加你的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;
}