Tricky Textarea Pulltab

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.


The humble textarea

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

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

Now say we absolutely positioned that

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.