CSS, aby zmienić styl kursora przycisku zmiany rozmiaru na obszarze tekstowym

Question

Zauważyłem, że przycisk zmiany rozmiaru w obszarze tekstowym po ukryciu i/lub kliknięciu pozostaje w postaci strzałki.

Wydaje mi się, że powinien być wskaźnikiem.

skoro istnieje css, aby usunąć lub dodać narzędzie zmiany rozmiaru do textarea,

resize:none; 

i css zmienić kursor całego textarea,

cursor:pointer; 

ale wydaje się, że powinien być parametrem css do kontrolowania kursora tylko przycisku zmiany rozmiaru. Rozglądałem się trochę i wydaje mi się, że nie mogę znaleźć nieruchomości. Mogę wymyślić kilka sposobów, aby to zrobić w javascript lub jquery, ale wydaje się przesadą.

Czy istnieje sposób na ustawienie kursora tylko przycisku zmiany rozmiaru textarea przez css?

Answer 1

Jest to renderowane przez samą przeglądarkę i nie jest częścią HTML, dlatego nie może być stylizowane za pomocą CSS.

Answer 2

To jest funkcja przeglądarki ... nie ma w tym stylu. Niektóre przeglądarki nie wyświetlają nawet narożników o innym rozmiarze w obszarze tekstowym. Niestety, to prawdopodobnie nie może być zmienione w tym momencie.

Answer 3

Istnieje prosty sposób na jQuery radzić sobie z tym problemem.

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

Zobacz jsFiddle

Jedna linia

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