Aşağıdaki CSS kuralı, textarea
öğeleri için yeniden boyutlandırma davranışını devre dışı bırakır:
textarea {
resize: none;
}
Bazı (ancak hepsi değil) textarea
lar için bunu devre dışı bırakmak için birkaç seçenek vardır.
nameniteliği
fooolarak ayarlanmış belirli bir
textareayı devre dışı bırakmak için (yani,
<textarea name="foo">
textarea[name=foo] {
resize: none;
}
Ya da bir id
niteliği kullanarak (yani, <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
W3C sayfası]3 yeniden boyutlandırma kısıtlamaları için olası değerleri listeler: yok, her ikisi de, yatay, dikey ve devral:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Şu anda hangi tarayıcıların bu özelliği desteklediğini görmek için iyi bir uyumluluk sayfasını inceleyin. Jon Hulka'nın yorumladığı gibi, boyutlar CSS'de max-width, max-height, min-width ve min-height kullanılarak daha da kısıtlanabilir.
Bilmeniz gereken çok önemli:
Bu özellik, taşma özelliği çoğu öğe için varsayılan olan görünür dışında bir şey olmadığı sürece hiçbir şey yapmaz. Yani genellikle bunu kullanmak için overflow: scroll gibi bir şey ayarlamanız gerekir;
Chris Coyier tarafından alıntı, http://css-tricks.com/almanac/properties/r/resize/
CSS 3, UI öğeleri için bunu yapmanıza olanak tanıyan yeni bir özelliğe sahiptir. Bu özellik resize özelliği'dir. Dolayısıyla, tüm textarea öğelerinin yeniden boyutlandırılmasını devre dışı bırakmak için stil sayfanıza aşağıdakileri eklersiniz:
textarea { resize: none; }
Bu bir CSS 3 özelliğidir; tarayıcı uyumluluğunu görmek için uyumluluk tablosu kullanın.
Şahsen, textarea öğelerinde yeniden boyutlandırmanın devre dışı bırakılmasını çok can sıkıcı buluyorum. Bu, tasarımcının kullanıcının istemcisini "kırmaya" çalıştığı durumlardan biridir. Eğer tasarımınız daha büyük bir textarea'yı barındıramıyorsa, tasarımınızın nasıl çalıştığını yeniden gözden geçirmek isteyebilirsiniz. Herhangi bir kullanıcı, tercihinizi geçersiz kılmak için kullanıcı stil sayfasına textarea { resize: both !important; }
ekleyebilir.