Geek Answers Handbook

How to change the width / height of the search box

I am having problems with this form that I created. I started working on an old project and decided to start a fresh one and cancel the code. The project was a recreation of the design of the Google homepage. I wanted to have a precise design, with the exception of some things that are not really needed. The search box (form) moved right where I wanted, but because of the new logo, I had to place the search box on my hand during the animation. The problem is that my coordinates are the way I wanted it, but the height and width will not change. This is all my code:

<!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>

Is there a way to change the height and width without “damaging” anything. I want the .SearchBar class .SearchBar respond to my coding, from which I changed the height and width. I changed it to 550 pixels and it still doesn't work, thanks for taking the time to read this.

+6
source share
1 answer

To change with the actual input element, you need to, well ... change the width of the actual input element. You changed the div, but not the input.

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

More articles:


All Articles