CSS para cambiar el estilo del cursor del botón de cambio de tamaño en un área de texto

Question

Observé que el botón para cambiar el tamaño de mi área de texto cuando se movía o hacía clic permanecía como una flecha.

Me parece que debería ser un puntero.

ya que existe css para eliminar o añadir la herramienta de cambio de tamaño para un área de texto,

resize:none; 

y CSS para cambiar el cursor de todo el área de texto,

cursor:pointer; 

pero parece que no hay debería ser un parámetro css para controlar el cursor del botón de cambio de tamaño. He estado buscando un poco y parece que no puedo encontrar la propiedad. Puedo pensar en algunas formas de hacer esto en javascript o jquery, pero parece exagerado.

Entonces, ¿hay alguna manera de establecer el cursor solo para el botón de cambio de tamaño de un área de texto a través de css?

Answer 1

Esto es renderizado por el navegador y no es parte de HTML, por lo tanto, no se puede diseñar a través de CSS.

Answer 2

Esa es una característica del navegador ... no hay ningún estilo para eso. Algunos navegadores ni siquiera muestran las esquinas de nuevo tamaño en el área de texto. Tristemente, eso probablemente no puede ser alterado en este punto.

Answer 3

Hay una manera simple en jQuery para tratar este problema.

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

Ver jsFiddle

Una línea

$(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":""}); })