CSSを使用してテキストエリアのサイズ変更ボタンのカーソルスタイルを変更する

Question

マウスを移動したりクリックしたときにテキストエリアのサイズ変更ボタンが矢印のままであることに気づきました。

私はそれがポインタでなければならないようです。

全体テキストエリアのカーソルを変更するには、テキストエリアに

resize:none; 

とCSSをリサイズツールを削除または追加するためのCSSがあると見て、

cursor:pointer; 

が、それはそこのように思えますサイズ変更ボタンのカーソルを制御するCSSパラメータにする必要があります。私は少し周りを見てきたが、プロパティを見つけるように見えることはできません。私はjavascriptやjqueryでこれを行ういくつかの方法を考えることができますが、過剰な殺人のように思えます。

CSSを使ってテキストエリアのサイズ変更ボタンのカーソルを設定する方法はありますか？

Answer 1

これはブラウザ自体によってレンダリングされ、HTMLの一部ではないため、CSSでスタイル設定することはできません。

Answer 2

これはブラウザの機能です...そのためのスタイルはありません。一部のブラウザでは、テキスト領域にリサイズコーナーを表示しない場合もあります。残念ながら、これはおそらくこの時点では変更できません。

Answer 3

jQueryには、この問題に対処する簡単な方法があります。

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

を参照してくださいjsFiddle

一行

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