การซ่อนจุดจับปรับขนาด textarea ใน Safari

ฉันใช้คอมโพเนนต์ textarea ในแอปพลิเคชันของฉันและฉันควบคุมความสูงแบบไดนามิก เมื่อผู้ใช้พิมพ์ความสูงจะเพิ่มขึ้นทุกครั้งที่มีข้อความเพียงพอ ใช้งานได้ดีบน IE, Firefox และ Safari

อย่างไรก็ตามใน Safari มีเครื่องมือ "ที่จับ" ที่ด้านขวาล่างซึ่งช่วยให้ผู้ใช้สามารถปรับขนาดพื้นที่ข้อความได้โดยคลิกและลาก ฉันยังสังเกตเห็นปัญหานี้กับ textarea ในหน้าถามคำถาม stackoverflow เครื่องมือนี้สร้างความสับสนและโดยทั่วไปแล้วจะเข้ามาขวางทาง

ดังนั้นจะมีการซ่อนแฮนเดิลปรับขนาดนี้หรือไม่?

(ฉันไม่แน่ใจว่า "ด้ามจับ" เป็นคำที่ถูกต้องหรือไม่ แต่ฉันคิดคำศัพท์ที่ดีกว่านี้ไม่ได้)

คุณสามารถแทนที่พฤติกรรมการปรับขนาดด้วย CSS:

textarea
{
   resize: none;
}

หรือเพียงแค่

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

คุณสมบัติที่ถูกต้อง ได้แก่ ทั้งแนวนอนแนวตั้งไม่มี

ใช้กฎ CSS ต่อไปนี้เพื่อปิดใช้งานลักษณะการทำงานนี้สำหรับTextAreaองค์ประกอบทั้งหมด:

textarea {
    resize: none;
}

หากคุณต้องการปิดการใช้งานสำหรับTextAreaองค์ประกอบบางอย่าง (แต่ไม่ใช่ทั้งหมด) คุณมีสองตัวเลือก (ขอบคุณหน้านี้ )

หากต้องการปิดใช้งานเฉพาะTextAreaด้วยnameแอตทริบิวต์ที่ตั้งค่าเป็นfoo(เช่น<TextArea name="foo"></TextArea>):

textarea[name=foo] {
    resize: none;
}

หรือใช้ ID (เช่น<TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

โปรดทราบว่าสิ่งนี้เกี่ยวข้องกับเบราว์เซอร์ที่ใช้ WebKit เท่านั้น (เช่น Safari และ Chrome) ซึ่งเพิ่มจุดจับปรับขนาดในTextAreaการควบคุม

โอกาสความกว้างสูงสุดของ Safari max-height ยังใช้งานได้ใน firefox 4.0 (b3pre) ตัวอย่างที่ดีที่นี่: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/