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>.
Then you drag that <textarea> taller. The <div> gets bigger.
Now say we absolutely positioned that
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.
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.
It really makes you hate IE, doesn’t it?
That is one neat trick, I really love your work Chris, keep it up!
Fair is fair, you aren’t the inventor of most things you post here. You simply rehash the findings of others. Case in point, your recent SVG article.
I’m glad this time you had the courage to credit someone else, even if that person was anonymous.
Haters are going to hate.
Thanks?
I guess usually I am some succubus article stealer? If there is uncredited work anywhere on this site please let me know.
Chris is a good communicator and runs a great site. Do you really see him as some sort of cyber crook?
His name is Ron Weasly. A Harry Potter fictional character, unless that really is your name, I kinda feel for you buddy. I’m guessing his wizardry skills have really failed him here. Sounds like a troll, Chris. Even if he was writing on behalf of other articles, do you really think he would directly copy them? There’s that term called paraphrasing…
Contrary to what many blog-nazi’s may say, rehashing isn’t bad. In fact it’s often very helpful.
How often, when needing to learn a new skill or technique, do you ‘google it’ and then start reading blog posts on the matter? If you are alike me, it’s, like, every time. And then how often, do you read a few and balk b/c the tutorial is either:
1) Poorly written
2) Not fully understood by the author
3) Or just the articles presentation just doesn’t resonate with you.
Quite often in my case. The articles here are almost always simple and clear. They might not always be perfect or even ‘right’ all the time, but nobody is. That’s how we learn.
Rupert Grint is not going to be happy with you Ronald Weasley.
I believe this maybe the troll from Harry Potter and the Philosophers Stone. :P
Looks like if you stop dragging half-way you get stuck in a weird limbo, neat trick though!
Hey Chris,
Nice trick!
Just a tip, you may want to style the scrollbars in that example.
If you slowly pull the red tab down it shows a small scrollbar above it in Chrome.
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb
{
opacity:0;
}
Just a little heads up, the text resizer thing isn’t in the latest version of Firefox.
resize: both;
width: 200px;
overflow: auto;
Interesting found.About resizing: textareas with a fixed width for Safari, Chrome and FF would be great, so that resizing just changes the height.
Are you asking if you’re able to do that? Chris did it in his demo so maybe i’m just misreading your statement as a question.
Just in case you were wanting to know – you can prevent resizing the width in two ways – you can use ‘resize:vertical;’ as Chris did in his demo (which is the proper way to do it) or you can just specify a max-width for the textarea.
Chris! its really nice tutorial. Thanks!
Another great article, as usual… I love how many random tricks are on here for great little visual bits and bobs… I’d love to see a load of them combined into the ultimate css trick site! (Sort of like a giant amalgamation of the best css tricks… though maybe that’s exactly what this site is but we don’t notice all the tricks! Anyway)
Not to flog a dead horse but Chris, you’re too nice… Anyone who comes on here, or any other site like this, and gets upset at the originality of an article, when essentially the site is offering brilliant FREE help and advice – I suggest two things: 1. Think about your perspective on originality with the notion that no idea is original, we are all recycling something someone else has done already (- isn’t that 75% of development anyway?) … and 2. That you look around at the world you live in and STFU.
:)
Cant we get rid of the little resizer nugget ?
Liking it!
You can now remove the caveat in your footer!
**May or may not contain any “CSS” or “Tricks”*
:-)
You don’t actually need a text area for this. The ‘resize’ property works on any block (such as a div) or inline-block. Not sure (haven’t checked), but it might even work somewhat on tables and table cells (since they can have height and width, but no overflow).
Cute, thanks.
Here is where you saw it http://codepen.io/mmoustafa
It’s the featured pen.
Yes! Thank you Mohamed. Clever work.