如何更改搜索框的宽度/高度

Question

如何更改搜索框的宽度/高度

Ano*_*mer 6 html css html5 search-engine css3

我正在创建这个表单时遇到问题.我开始研究一个旧项目,并决定重新开始并废弃代码.该项目是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>

Run Code Online (Sandbox Code Playgroud)

有没有办法改变高度和宽度而不"破坏"任何东西.我希望课程.SearchBar能够回应我改变高度和宽度的编码.我将其更改为550像素,它仍然无法正常工作,感谢您花时间阅读此内容.

Answer 1

Rya*_*nal 8

为了改变实际输入元素的含义,你需要......改变实际输入元素的宽度.你已经改变了div,但没有改变输入.

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	28379 次
最近记录：	10 年，3 月前