How to customize <textarea>s

When we create textareas, we don’t exercise a lot of control over how they resize. By default they can be resized vertically or horizontally and they also use the default resizing button.

However, we actually have far more control than we think we do: we can define how the textarea should resize and we even have a pseudo element that allows us to control the icon.

Controlling the resizing

Depending on our designs, we frequently don’t want our textareas to resize both vertically and horizontally because it breaks our layouts.

There is in fact a CSS property that controls the resizing. It’s called, surprisingly enough, resize. The default value is both, but we can also set it to horizontal, vertical or none:

textarea { resize: horizontal; };
textarea { resize: vertical; };
textarea { resize: none; };

The resize property gives you some control, but it’s not very precise. For precise control, we need to use the max-height, min-height, max-width and min-width properties to specify exactly how much resizing is permitted.

For example in this code our textarea will resize vertically, but only between 100px and 400px:

textarea { 
   resize:vertical; 
   max-height:400px; 
   min-height:100px;
}

A combination of these properties gives you all the control you need, and it will work in all major browsers except Internet Explorer.

Changing the icon

The resize icon is one of those tiny little details that most designers overlook. However, with a little attention to detail you can add an extra touch of quality that makes your design stand out.

Unfortunately this pseudo element is only supported by Chrome at present, but it’s simple enough to use that it’s worth the effort:

If you wanted to set the background to a solid black you’d use:

::-webkit-resizer{ 
   background-color: black; 
}

And of course, the most flexible option from a design point of view is to use an image as the background:

::-webkit-resizer{ 
   background-image: url(images/resizer.png); 
}

Conclusion

You can see a demo of these ideas here.

These two tips aren’t game changers like animation, or box-shadow. But what they do allow is just a little more control of one of the basic building blocks of HTML forms, and as such they’re worth remembering.

Have you styled a textarea for a project? What other form elements do you struggle to style? Let us know in the comments.