Boyutu değişken yazılar için kullanılan textarea öğesinin, bir çok html öğesinin aksine kendiliğinden gelen büyütülebilme/küçültülebilme özelliği vardır. Sağ alt tarafına gelen iki ufak diyagonal çizgi ile bu boyut değiştirme özelliğini kullanabilirsiniz. Ancak özellikle tasarım gereği bu özelliği kapatmak isteyebilirsiniz. Tüm textarea öğeleri için bunu kullanabilirsiniz:
textarea { resize: none; }
Belirli bir isme sahip, mesela "hikaye", öğeler için de şunu kullanabilirsiniz:
textarea[name=hikaye] { resize: none; }
Tabii ki aynı işi belirli bir textarea ya "id" vererek de yapabilirsiniz:
#hikaye { resize: none; }
Textarea nın genişleme özelliğini tamamen kapatmak değil sadece dikey ya da yatay olarak kullanmak isterseniz, şunu yapabilirsiniz:
textarea { resize: vertical; /* sadece dikey kullanim */ }
textarea { resize: horizontal; /* sadece yatay kullanim */ }
Bu özelliğin sorun çıkarttığı durumlar için tabii ki min/max genişlik ve yükseklik de verebilirsiniz. Ayrıca kutunun içeriği aşıldıktan sonra içerde genişlemeye başladığı zaman yan tarafında çıkan "scroll bar" da "overflow:auto" stilini ekleyerek kaldırabilirsiniz. Bu stilleri html üstünde yapmak isterseniz kolon ve satır sayısı belirterek de işlem yapabilirsiniz:
<textarea style="overflow:auto;resize:none" rows="20" cols="30"></textarea>