CSS to change the cursor style of the resize button on a textarea

Question

I noticed that the resize button on my text area when hovered and/or clicked is staying as an arrow.

It seems to me like it should be a pointer.

seeing as there is css to remove or add the resize tool to a textarea,

resize:none;

and css to change the cursor of the whole textarea,

cursor:pointer;

but it seems like there should be a css parameter to control the cursor of just the resize button. I've been looking around a bit and can't seem to find the property though. I can think of a few ways to do this in javascript or jquery but seems like overkill.

So is there a way to set the cursor for just the resize button of a textarea via css?

Emprise

Answer 1

This is rendered by the browser itself and is not part of HTML, therefore it cannot be styled via CSS.

Madea

Looks like a javascript solution it is then. – Emprise

See my answer for even easier jQuery solution. – Saraann

This worked in Chrome by adding it to the stylesheet FYI – Marjana

Answer 2

There is a simple way in jQuery to deal with this issue.

<script type="text/javascript">
    $(function() {
        $(document).on('mousemove', 'textarea', function(e) {
            var a = $(this).offset().top + $(this).outerHeight() - 16,  //  top border of bottom-right-corner-box area
                b = $(this).offset().left + $(this).outerWidth() - 16;  //  left border of bottom-right-corner-box area
            $(this).css({
                cursor: e.pageY > a && e.pageX > b ? 'nw-resize' : ''
            });
        })
    });
</script>

See jsFiddle

One line

$(document).on('mousemove', 'textarea', function(e) { var a=$(this).offset().top+$(this).outerHeight()-16,b=$(this).offset().left+$(this).outerWidth()-16;$(this).css({cursor:e.pageY>a&&e.pageX>b?"nw-resize":""}); })

Saraann

very nice. I'd like it even better if there was a css solution but this works very well thank you. – Emprise

Yeah, i wanted simple CSS or for browsers to do it already, but so far, thats a no go. The above script only deals with the lower right corner (the resize area) but could be used to apply mouse change whenever and where on a textarea – Saraann

@Saraann You probably want to remove myPos.bottom>e.pageY and myPos.right>e.pageX since you are attaching the event to textarea (the cursor style is valid only inside) – Obliquely

@Saraann what about it? I'm just saying the code would be faster avoiding those two operations. The mouse will be out of the container before the event handler can check if its outside the area to remove the cursor. – Obliquely

The jsFiddle is not working in Chrome on OS X. Works in Firefox though. – Fiddling

Answer 3

You could use CSS's cursor property on the element's ":after" pseudo element:

#block{
  display: block;
  width:150px;
  height:100px;
  border: solid black 1px;
  background: red;
}

.resizable{
  resize: both;
  overflow:auto;
  position:relative;
}

.resizable:after{
  content:"";
  position: absolute;
  bottom: 0;
  right:0;
  display:block;
  width:8px;
  height:8px;
  cursor: nwse-resize;
  background-color: rgba(255,255,255,0.5)
}

<div id="block" class="resizable"></div>

(I put a semi transparent white background color to the :after pseudo element so that you can see it's position and size, but you could make it invisible)

Vermiculation

How can you adapt this code to work with a textarea element? – Pl

Answer 4

That is a browser feature... there aren't any styles for that. Some browsers don't even display re-size corners on text area. Sadly, that probably cannot be altered at this point.

Skitter