搜索框與按鈕像谷歌

-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

搜索框與按鈕像谷歌

回答

相關問題