In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing in there, they can have it. Clicking and dragging that resizer literally changes the box model of that textarea, pushing other things away as needed. We can use that little ability to make a trick!
Fair is fair, I didn't invent this. I saw it maybe a year ago but I can't for the life of me remember where. When I saw David Walsh's quick post on how you can style it, it reminded me of this, so I set about recreating the idea.
at the bottom of another area.
Now as you drag the textarea resizer downward to grow it larger, the div actually grows upwards.
Then if we make the textarea small and style the resizer handle, it doesn't looks like a textarea at all (webkit only).
textarea {
width: 12px;
height: 12px;
}
textarea::-webkit-resizer {
background: yellow;
}
Some little chunk hangs out the bottom there. I'm not sure what that's all about but you can hide it with an overflow: hidden; on either wrapper.
We'll further style the resizer (I guess we can now call it the "tab") by:
- Centering it -
.tab { text-align: center; }
- Hiding the insides of the textarea -
textarea { background: none; border: 0; }
- Ensuring the tab can only be pulled down -
textarea { resize: vertical; }
- Limiting the height of the newly exposed area -
.tab, textarea { max-height: 100px; }</li>
Now when you pull the "tab" down, it just reveals more green:
So now, if we were to put some actual content in that green area and position it just down far enough to be hidden by default, we can yank on that little tab and reveal the content. Pretty neat.
Demo
Colors and such changed to be a little more look-at-able.
Check out this Pen!
I don't know that this is particularly useful. I know it's not very mobile friendly. I know it's not very cross-browser cool. What it is, is a bonafide little CSS trick.
The CSS-Tricks feed is sponsored by Wufoo, the best online form builder there is. I use it on every project I've done as long as I've been a web worker. Quickly build any type of form you need, from the humble contact form to the epic multi-page, logic-riddled, mobile-friendly, custom-designed, spam-protected, payment-taking super form. Try Wufoo for free today!
Tricky Textarea Pulltab is a post from CSS-Tricks
The humble textarea
