搜索框与按钮像谷歌

-1

如何创建一个搜索框旁边的按钮，就像你在FireFox标签页中看到谷歌搜索？我只对风格感兴趣，而不是搜索行为。搜索框与按钮像谷歌

而风格我的意思是它是如何水平和垂直居中在中间。从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; 
}

这是现在的样子截图：

screenshot

编辑

的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>

来源

2013-07-02 Yustme

什么你到目前为止尝试过吗？检查元素？ –

所以你想要一个居中的文本框和按钮？ –

@JoeT，是从那里粘贴了一些副本，但没有。现在也搜了2天网。 – Yustme

检查这个类似的帖子你的答案：

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/

来源

2013-07-02 23:26:51

谢谢，当我回家时，我会尽快尝试。我发现了其他可能会做的伎俩。但这看起来很有希望。再次感谢。 – Yustme

我已经在我的mvc项目中尝试了您的解决方案，并且它似乎并不适用该样式。即使我将它包含在我需要的页面视图中。并设置htmlattributes。看到我的问题的更新。 – Yustme

搜索框与按钮像谷歌

回答

相关问题