Controlling Safari & Chrome’s Resizable Textarea with Simple CSS

December 28, 2009 | Tags for this entry: CSS, web design, webkit

This article shows you how to get a “handle” on Webkit’s resizable textarea by managing its resize area without disabling the feature, as some have proposed.

By now, most web surfers are aware that as of Safari 3, the Webkit engine (which also powers Google Chrome) introduced a new feature: the user-resizable textarea. This feature was very welcome to those who are familiar with accessibility and web usability. Allowing a user to resize the textarea instead of simply relying on the scrollbars is just all-around good UI design.

However, it presents a new layout problem that we’ve never really had to deal with before. Since the user can resize the text box, they could end up seeing a broken version of your original form. While this doesn’t hurt anything at all, since the user is the one who initiates the resizing (and not some CSS or Javascript), their experience isn’t harmed.

But, like most designers, I’m sure you’d like to maintain some level of control over the page layout. So we’ll use some very simple CSS to control its behavior.

Let’s Do This

We’ll start by designing the layout of our form.

    <ol id="form">
        <li>
            <label for="Name">Name</label>
            <input type="text" name="Name" id="Name" /></li>
        <li>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" /></li>
        <li>
            <label for="comment">Question or Comment</label>
            <textarea name="Comment" id="Comment" rows="5" cols="20"></textarea>
         </li>
        <li><input type="submit" value="Send" id="submit" name="submit" class="inputButton" /></li>                               
    </ol>

Then we’ll add the CSS. We won’t get into specifics about the design. We can simply use these pre-defined styles.

#form {
	margin: 0;
	padding: 0;
}
#form label {
	padding: 3px 10px 0 0;
	margin: 0 0 3px 0;
	display: block;
}
#form li {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
}
#form input {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
}
#form textarea {
	border: 1px solid #737272;
	background: #EEE;
}

The above code leaves us with a set of form fields that looks roughly like this. You’ll notice that in Safari or Chrome, there is a gripper handle on the bottom right corner.

This resize handle allows the user to make the box taller or wider if they feel they need just a little more room to continue typing…even if it means disregarding the boundaries of our beautiful layout!

The Fix

Since we want the textarea to match the width of the other input values, we’ll add a width. This also keeps the textarea from being resized to a width that is smaller than that which is defined for our layout.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
}

Our biggest concern is if the user makes the textarea too big, though. So we’ll add a max-width property.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
	max-width: 175px; /* RESTRICT SAFARI RESIZE */
}

Now, our textarea is only resizable vertically. This is nearly complete for our example, but we don’t want the user to be able to resize infinitely. It’s fun to play around with, but it looks pretty silly. To stop that from happening, we define a max-height that we think will give our users the flexibility that they’ll need if they want more space to type in.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
	max-width: 175px; /* RESTRICT SAFARI RESIZE */
	max-height: 250px; /* RESTRICT SAFARI RESIZE */
}

Now, with all of the proper CSS in place, we avoid disabling features that users may find helpful, while maintaining the layout that we intended when designing the site.

Note: Defining rows and columns in your textarea attributes also specifies a minimum width and height for the element. While necessary for maximum accessibility, these attributes alone do not allow you to control the display as precisely as CSS does.

Note: If you design allows room for it, you can also define a max-width that is larger than your textarea‘s standard width to allow flexibility in horizontal sizing.