-1

如您在 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>
4

1 回答 1

1

检查这个类似的帖子以获得您的答案：

在页面上垂直和水平居中 <div> 的最佳方法？

该帖子的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/

于 2013-07-02T23:26:51.140 回答