tmpearce tmpearce - 3 months ago 40
CSS Question

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

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.)

enter image description hereenter image description here

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

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>