如何更改搜索框的 Width/Height

Question

我在创建此表单时遇到了问题。我开始从事一个旧项目，并决定重新开始并废弃代码。该项目是 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>

有没有办法在不 'damaging' 任何东西的情况下改变高度和宽度。我希望 class、.SearchBar 响应我更改了高度和宽度的编码。我把它改成550像素了，还是不行，感谢您抽空阅读。

Answer 1

为了更改实际输入元素的宽度，您需要，呃...更改实际输入元素的宽度。您更改了 div，但未更改输入。

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

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

如何更改搜索框的 Width/Height

How to Change The Width/Height Of A Search Box

html

css

search-engine