带谷歌按钮的搜索框

Question

如何在FireFox标签页中看到，如何像google搜索一样创建一个带有旁边按钮的搜索框？ 我只对风格感兴趣，而不是它的搜索行为。

对于风格，我的意思是它是如何在中间水平和垂直居中。

developerstool的CSS代码：

    #searchSubmit {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-start: 1px solid transparent;
    -moz-border-top-colors: none;
    -moz-margin-start: -1px;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) repeat scroll 0 0 padding-box transparent;
    border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
    border-image: none;
    border-radius: 0 2.5px 2.5px 0;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 0 9px;
    transition-duration: 150ms;
    transition-property: background-color, border-color, box-shadow;
}

这是现在的样子截图：

修改

MVC视图代码：

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{  
    <div id="#searchContainer">
        @Html.MultiSelectBoxFor(model => model.TestIds, Model.Tests)
        @Html.SubmitButton("Submit", "Submit")
    </div>
}

<style type="text/css">
    #searchContainer {
    width: 100px;
    height: 25px;
    /*background-color: red;*/

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

#searchText {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-flex: 1;
    background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9);
    border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
    border-image: none;
    border-radius: 2.5px 0 0 2.5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 6px 8px;
}
</style>

Answer 1

检查此类似帖子的答案：

Best way to center a <div> on a page vertically and horizontally?

该帖子的css：

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

获取文本框...

http://jsfiddle.net/3UtEy/