web-dev-qa-db-ja.com

検索ボックスの幅/高さを変更する方法

作成していたこのフォームに問題があります。私は古いプロジェクトに取り組み始め、新しく始めてコードをスクラップすることにしました。このプロジェクトは、Googleホームページのデザインを再現したものです。本当に必要ないものを除いて、私は正確なデザインが欲しかった。検索ボックス（フォーム）は希望する場所に右に移動しましたが、新しいロゴのため、アニメーション中に検索ボックスを手に配置する必要がありました。問題は、私の座標が私が望んだ方法であるにもかかわらず、高さと幅が変更されないことです。これは私の全体のコードです：

<!DOCTYPE HTML>
<HTML>
    <head>
        <title>Google</title>
        <style>
            .GoogleLogo {
                position:absolute;
                TOP:125px;
                LEFT:575px;
            }

            .SearchBar {
                position: absolute;
                top: 355px;
                left: 575px;
                height: 30px;
                width: 50px;
            }

        </style>
    </head>
    <body>

        <div class="GoogleLogo">
            <a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a>
        </div>

        <div class="SearchBar">
            <form>
                            <input type="text" placeholder="Search..." required>
            </form>
        </div>

    </body>
</HTML>

何も「損傷」することなく高さと幅を変更する方法はありますか？クラスが欲しい、.SearchBar、高さと幅を変更した私のコーディングに応答します。 550ピクセルに変更しましたが、まだ機能しません。時間を割いて読んでいただき、ありがとうございます。

htmlcsssearch-engine
7
AnotherProgrammer

実際の入力要素のを変更するには、実際の入力要素の幅を変更する必要があります。 divを変更しましたが、入力は変更していません。

.SearchBar {
     position: absolute;
     top: 355px;
     left: 575px;
}

.SearchBar input {
     height: 30px;
     width: 50px;
}
9
Ryan Kinal