带有按钮的搜索框，例如 google答案

【问题标题】：Search box with button like google带有按钮的搜索框，例如 google
【发布时间】：2013-07-04 06:01:20
【问题描述】：

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

我所说的样式是指它在中间水平和垂直居中的方式。

来自开发者工具的 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>

【问题讨论】：

到目前为止您尝试了什么？检查元素？
所以你想要一个居中的文本框和按钮？
@JoeT，是的，从那里做了一些复制粘贴，但什么也没做。现在也在网上搜索了2天。
@CoreyOgburn，基本上就是这样。搜索后，文本框和按钮必须像谷歌一样放在顶部
请添加屏幕截图。

标签： css asp.net-mvc-4 google-search

【解决方案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/

【讨论】：

谢谢，我回家后尽快试试这个。我也发现了其他可以解决问题的方法。但这看起来很有希望。再次感谢。
我已经在我的 mvc 项目中尝试过您的解决方案，但它似乎没有应用该样式。即使我将它包含在我需要它的页面视图中。并设置了 htmlattributes。请参阅我的更新问题。