Wednesday, April 03, 2013

Tricky Textarea Pulltab

Tricky Textarea Pulltab
The humble textarea

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.

Let's say you put that <textarea> in a green <div>.

Tricky Textarea Pulltab

Then you drag that <textarea> taller. The <div> gets bigger.

Tricky Textarea Pulltab

Now say we absolutely positioned that at the bottom of another area.

Tricky Textarea Pulltab

Now as you drag the textarea resizer downward to grow it larger, the div actually grows upwards.

Tricky Textarea Pulltab

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;
}

Tricky Textarea Pulltab

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; }

Now when you pull the "tab" down, it just reveals more green:

Tricky Textarea Pulltab

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.

via CSS Tricks by