-1

FireFox タブ ページに表示される Google 検索のように、隣にボタンがある検索ボックスを作成するにはどうすればよいですか? 検索動作ではなく、スタイルにのみ関心があります。

スタイルとは、水平方向と垂直方向の中央に配置されていることを意味します。

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

これは、現在のように見えるスクリーンショットです。

スクリーンショット

編集

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 に答える