css - 带有 jquery ui 的搜索框

Question

我试图让我的搜索框看起来像 facebook 的搜索框，其中的按钮看起来像是在文本框内。请看 Facebook 主页。我正在使用 jquery ui 和它的图形，对于按钮，问题是我认为它为创建的按钮添加了边框，因此文本输入和按钮之间存在这种分离，无论如何要解决这个问题？

这是我的搜索表单

<div class="div-search-form" style="display: inline; float: right;"><form method="get" id="search_form" class="" action="/searches">
        <input type="text" value="Search" name="q" id="q" class="search-term" style="border: medium none;">
             <span class="small-button"><a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"><span class="ui-button-icon-primary ui-icon ui-icon-search"></span><span class="ui-button-text">Search</span></a></span>
        </form>
      </div>

更新

我想我到了那里。

这是我的CSS

.search-button {
    background-position: -160px -112px;
    display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
    background-image: url(images/ui-icons_ff0084_256x240.png);
    float:left;
    border-left: 0 !important;
    background-color: white;
    width:16px;

}
.search-term {
    padding:1px 5px 1px 20px;
    border: 0 !important;
    float:left;
    background-image: url(images/ui-bg_flat_0_eeeeee_40x100.png);

}
.search-term:focus{
    background-image: none;
}

.div-search-form {
    margin-right: 0;
    float:right;
    margin-top:5px;
}

和标记

<div class="div-search-form"><form method="get" id="search_form" class="" action="/searches">
      <input type="text" value="Search" name="q" id="q" class="search-term">

        <a class="search-button" id="search-button" href="#">&nbsp;</a>
      </form>
    </div>

请注意，除非我放一个 &nbps; anchor 标记的背景图像不显示。想知道为什么吗？

此外，不确定如何使它们大小相同但高度更大。现在它们的高度都是 16 像素，但如果我使用填充，对齐就会出现问题。

Answer 1

基本上您需要做的是创建一个镜像左侧输入字段样式的图像。

您将在按钮旁边 float 输入字段。

对于左侧的输入字段，控制 CSS，因此没有右边框，还要确保添加一些填充，这样文本就不会碰到按钮。

input.search-term { float:left; border:1px solid #CCCCCC; border-right:none; padding:5px; }

你的图片没有左边框

.smallbutton a { float:left; border:1px solid #CCCCCC; border-left:none; background:url(../imagepath); disiplay:block; height:XXpx; width:XXpx; }

诀窍与实现目标的技术方法无关，而是创造性地使用您用来实现目标的图像和 CSS。