Как изменить ширину / высоту окна поиска

у меня проблемы с этой формой, которую я создавал. Я начал работать над старым проектом и решил начать с чистого листа. Проект был воссозданием дизайна домашней страницы 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 пикселей, и он все еще не работает, спасибо, что нашли время прочитать это.

6
css css3 html html5 search-engine

1 ответов

для того, чтобы изменить с фактического входного элемента, вам нужно, хорошо... измените ширину фактического входного элемента. Вы изменили div, но не вход.

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

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