CSS per modificare lo stile del cursore del pulsante di ridimensionamento su un'area di testo

Question

Ho notato che il pulsante di ridimensionamento nell'area di testo quando si passa con il mouse e/o si fa clic rimane come una freccia.

Mi sembra che dovrebbe essere un puntatore.

visto che non v'è css di rimuovere o aggiungere lo strumento di ridimensionamento per una textarea,

resize:none; 

e CSS per modificare il cursore di tutta la textarea,

cursor:pointer; 

ma sembra che ci dovrebbe essere un parametro css per controllare il cursore del solo pulsante di ridimensionamento. Mi sono guardato intorno un po 'e non riesco a trovare la proprietà però. Posso pensare ad alcuni modi per farlo in javascript o jquery ma sembra eccessivo.

Quindi c'è un modo per impostare il cursore solo per il pulsante di ridimensionamento di una textarea tramite css?

Answer 1

Questo è reso dal browser stesso e non fa parte di HTML, pertanto non può essere formattato tramite CSS.

Answer 2

Questa è una funzionalità del browser ... non ci sono stili per questo. Alcuni browser non visualizzano nemmeno gli angoli di ridimensionamento sull'area di testo. Purtroppo, questo probabilmente non può essere modificato a questo punto.

Answer 3

C'è un modo semplice in jQuery per risolvere questo 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> 

Vedi jsFiddle

Una linea

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