{"id":20715,"date":"2013-03-21T14:47:37","date_gmt":"2013-03-21T21:47:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=20715"},"modified":"2013-03-21T14:47:37","modified_gmt":"2013-03-21T21:47:37","slug":"tricky-textarea-pulltab","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/tricky-textarea-pulltab\/","title":{"rendered":"Tricky Textarea Pulltab"},"content":{"rendered":"

In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea><\/code>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!<\/p>\n

<\/p>\n

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<\/a>, it reminded me of this, so I set about recreating the idea.<\/p>\n

\n
The humble textarea<\/figcaption><\/figure>\n

Let’s say you put that <textarea><\/code> in a green <div><\/code>.<\/p>\n

<\/figure>\n

Then you drag that <textarea><\/code> taller. The <div><\/code> gets bigger.<\/p>\n

<\/figure>\n

Now say we absolutely positioned that <\/p>\n

at the bottom of another area.<\/p>\n
<\/figure>\n

Now as you drag the textarea resizer downward<\/strong> to grow it larger, the div actually grows upwards<\/strong>.<\/p>\n

<\/figure>\n

Then if we make the textarea small and style the resizer handle, it doesn’t looks like a textarea at all (webkit only).<\/p>\n

textarea {\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\ntextarea::-webkit-resizer {\r\n  background: yellow;\r\n}<\/code><\/pre>\n
<\/figure>\n
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;<\/code> on either wrapper.<\/p>\n
We’ll further style the resizer (I guess we can now call it the “tab”) by:<\/p>\n