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

问题

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?

回答1:

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

回答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":""}); })

回答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)

回答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.

来源：https://stackoverflow.com/questions/9932569/css-to-change-the-cursor-style-of-the-resize-button-on-a-textarea

标签

css

css3

resize

cursor

textarea