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>

请注意，除非我输入＆amp; nbps;锚标记的背景图像不会显示。不知道为什么？

另外，不确定如何使它们的尺寸相同，高度也更大。现在它们的高度都是16像素，但是如果我玩填充物，那么对齐就会失控。

Answer 1

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

您将浮动按钮旁边的输入字段。

对于左侧的输入字段控制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创造性。

用jquery ui搜索框

更新

和标记

1 个答案: