सीएसएस एक टेक्स्टरेरा

Question

पर आकार बदलें बटन की कर्सर शैली को बदलने के लिए मैंने देखा है कि मेरे टेक्स्ट क्षेत्र पर आकार बदलना और/या क्लिक किया गया एक तीर के रूप में रह रहा है।

ऐसा लगता है कि यह एक सूचक होना चाहिए।

के रूप में वहाँ हटाने या एक पाठ क्षेत्र के आकार टूल जोड़ने के लिए सीएसएस है देखकर,

resize:none; 

और सीएसएस पूरे पाठ क्षेत्र के कर्सर को बदलने के लिए,

cursor:pointer; 

लेकिन यह वहाँ की तरह लगता है बस आकार बदलने के कर्सर को नियंत्रित करने के लिए एक सीएसएस पैरामीटर होना चाहिए। मैं थोड़ा सा देख रहा हूं और संपत्ति को ढूंढने के लिए प्रतीत नहीं होता। मैं जावास्क्रिप्ट या jquery में ऐसा करने के कुछ तरीकों के बारे में सोच सकता हूं लेकिन ओवरकिल की तरह लगता है।

तो क्या सीएसएस के माध्यम से टेक्स्टरेरा के बस आकार के बटन के लिए कर्सर सेट करने का कोई तरीका है?

Answer 1

यह ब्राउज़र द्वारा ही प्रदान किया जाता है और यह HTML का हिस्सा नहीं है, इसलिए इसे सीएसएस के माध्यम से स्टाइल नहीं किया जा सकता है।

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