Input box in a form like google.com

HTML & CSS
1

Hi,

If you go to www.Google.com you will see an input box.

The box is highlighted when you click to type in the box.

This box is much better than the standard box I get when I, for example, make a contact form.

Can you please tell me how I can style a contact form to include this type of box?

Thanks.

Matt.

2

You might need to clarify what you mean by “highlighted”. In many browsers, a active input form has :focus styling to make it obvious that it has focus. That’s important for accessibility.

3

When I say highlighted - I mean - it has a border around the box when active/in use.

Go to www.Google.com to see the search box. And type something in it to see the border.

4

As Ralph mentioned, you can use :focus to select an active input element, then style it any way you like to differ from the original input style.
This will give you the border colours that Google uses:-

input { /* Default input */
    border: solid 1px;
    border-color: #D9D9D9;
}
input:focus {   /* Selected input */
    border-color: #4D90FE;
}

You can re-style the input any way you like, changing the background or whatever you want.

1 Like
5

thanks for that - do you also know how to change the border for when the user just hovers over the input box.

Is it ‘input: hover’ or something like that?

Thanks.

6

They’re Pseudo-classes

7

OK - great - Also - do you know how to make the input box bigger - I can make it wider but I cannot work out how to make it higher. For an example, see www.JohnLewis.com search bar at the top of their page.

Thanks,

Matt.

8

Increase the font-size for input.

9

if you look at the JohnLewis.com website the text is small relative to the box size.

When I change the text size the text takes up all the space in the box.

Do you know how to increase the height of the box without increasing the size of the text?

Matt.

10

Try padding.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.