Search box with button like google

Question

How do you create a search box with a button next to it like google search as you see in a FireFox tab page? I'm only interested in the style, not it's search behavior.

And with style i mean how it's horizontally and vertically centered in the middle.

CSS code from developerstool:

    #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;
}

This is a screenshot of how it looks like now:

screenshot

Edit

The MVC view code:

@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, yea did some copy pasting from there, but nothing. Also searched the net for 2 days now. — Yustme, Jul 02 '13 at 22:00
@CoreyOgburn, thats basically it yea. After the search, the textbox and button have to be placed at the top like google does — Yustme, Jul 02 '13 at 22:01
Copy-n-paste won't be enough. You're most likely ONLY copying the HTML and not the CSS that goes with it. — hungerstar, Jul 02 '13 at 22:14
Man we cant make your work, try something by yourself paste the code and the we can assist you.... — ncubica, Jul 02 '13 at 22:38
@nahum, relaxt man, take a deep breath. Site.css is a big ass file to just post here. Try counting to 10 before you post again. — Yustme, Jul 03 '13 at 07:34
@hungerstar, i copied only the css not the html. But i pasted it in the site.css file. Something else might have been "overwriting" it. — Yustme, Jul 03 '13 at 07:35
Well, without some code it's going to be really hard to know what is going on. — hungerstar, Jul 03 '13 at 07:40
@Yustme ?? ¬¬ Im just want to help... but without code is quite hard... — ncubica, Jul 03 '13 at 13:59

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

Check this similar post for your answer:

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

The css from that post:

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

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

    margin: auto;
}

To get your textbox...

http://jsfiddle.net/3UtEy/

edited May 23 '17 at 12:28

Community

1
1

answered Jul 02 '13 at 23:26

Ted A.

2,264
17
22

thanks, i'll try this asap when I get at home. I found something else too that might do the trick. But this looks promising. Thanks again. – Yustme Jul 03 '13 at 07:36
I've tried your solution in my mvc project and it seems that it doesn't apply the style. Even though i included it in the view of the page where i need it. And with the htmlattributes set. See my question for the update. – Yustme Jul 03 '13 at 21:59

Search box with button like google

1 Answers1