How can I prevent a textarea resize handle from showing through higher z-index div?

Question

I'd like to have a hidden <textarea> element on my page to handle user input while displaying it in a custom way. I thought I'd be able to do this by giving it a lower z-index than the element I'm hiding it behind (yes, the element is positioned too) . Indeed, the textarea is hidden appropriately. However... when enough text is entered to necessitate a scrollbar, the resize handle (grip) icon shows up on top of the masking <div>! (At least, on chrome.)

Here's a jsfiddle to play around with.

How can I stop this from happening? The handle doesn't actually allow resizing, so it seems very odd it would pop to the top depending on content length.

Additionally, is there a more canonical way of hiding a text input field?

Answer 1

This should disable the resize handle entirely - but using clip() you could hide the scrollbar

<style>
 textarea{ 
   position: absolute;
   left:10px;
   top:10px;
   z-index:-1;
   resize:none;
   width:200px;
   height:50px;
   clip:rect(0,189px, 50px, 0);
 }
</style>

Answer 2

for those who arrived here looking for a way to hide the resize icon, use:

textarea {
    resize: none;
}