Make form fields and buttons fast and easy.

I’ve recently had to make a lot of forms with similar style (a lot of graphics), but the width of the fields and buttons was varying from 20px to 500px, and there were at least six different groups sizes so using a fixed width background was not an option.

Usually the way to make scalable field is to use three parts: left, middle and right. The left and right parts are having a non-repeating background, and have fixed width, while the middle part is having a repeating background:

But the code still looks long, and I am not a big fan of using three images. There is a easy way to avoid this and to make the code shorter – by using two instead of three images – one big (for left AND middle) and one right. This is how we can save one element. And by combining all the images into one, and using only this as a background (think css sprites) we can avoid the three images, ergo better loading times.

We just saved two lines of code. Keep in mind that this time we are using the same image – “path_to_image.png” (which is the whole image shown above) for the two div containers – that reduces the loading time by combining all the images into one – think about CSS Sprites. The only difference this time is that we are showing the background aligned to the right for the right container.

As you can see here, we’ve generated three different sized buttons just by re-using our code, and changing the width on the input field.
The only problem here will be the hover state, since we are hovering only on the middle (form_field middle), child and by using form_field middle:hover we will change only the background of the specified container.

The solution for this is to target the parent div for the hover by adding two new lines and removing the “.form_field .middle:hover” one: