Metin Alanı CSS Şablonları

Uzun Yanıtlar İçin Textarea CSS Şablonları

Bir textarea öğesi ad veya e-posta adresi yerine cümleleri toplar; bu nedenle tek satırlık bir alana uyan kurallar burada sıkışık kalır. Bir şablonun asıl belirlediği unsur yazma alanıdır: alanın ne kadar derinlikte açıldığı, metnin içine nasıl yerleştiği, ne kadar sürüklenebildiği ve odaklanıldığında neyin değiştiği.

Güvenilir bir başlangıç noktası; alana tam genişlik, 640px civarında bir üst sınır, yaklaşık 140px minimum yükseklik, 12px'e 14px dolgu, küçük yarıçaplı ince gri bir kenarlık, devralınan tipografi, 1.5 satır yüksekliği, yalnızca dikey yeniden boyutlandırma ve border-box boyutlandırması sağlar.

Boyut, Dolgu, Yeniden Boyutlandırma ve Odak Durumları

Bu kararların her biri geçerli bir amaca hizmet eder:

• "min-height", yanıt yazılırken ilk satırların görünür kalması için alanı yeterince derin açar;
• "box-sizing: border-box" ile birlikte %100 "max-width", düzeni yana doğru itmek yerine dar ekranlarda alanın kapsayıcısı içinde kalmasını sağlar;
• 1.5 civarındaki "line-height", uzun bir yanıtın yalnızca gönderildikten sonra değil, yazılırken de kolay okunmasını sağlar;
• "resize: vertical", kullanıcıların alanı büyütmesine olanak tanırken çevreleyen sütunu bozan yana doğru sürüklemeyi engeller;
• Görünür bir odak çerçevesi veya daha belirgin bir kenarlık rengi, hangi alanın etkin olduğunu gösterir ve bu durum en çok klavye kullanıcıları için önem taşır.

İki uzlaşmayı belirtmekte fayda var. Sabit ve yüksek bir boyut masaüstünde ferah görünürken telefonda kullanışsız kalır; bu yüzden minimum yükseklik ile yüzde tabanlı genişlik daha güvenlidir. Ayrıca "resize: none" düzeni korusa da yanıtı beklenenden uzun süren kullanıcıları kısıtlar; otomatik dikey taşmaya sahip bir maksimum yükseklik bu sorunu daha kullanışlı biçimde çözer.

Üç Pratik Stil Varyantı

Kompakt bir geri bildirim kutusu, iki veya üç cümlenin gerçekçi sınırı olması nedeniyle daha dar bir dolguyla 90px minimum derinliğe yakın kalabilir. Bir destek talebi ise 180px, daha gevşek bir satır yüksekliği ve maksimum yükseklik gerektirir; böylece yapıştırılan bir günlük kaydı düzeni uzatmak yerine kaydırılır. Bir proje özeti daha da ileri gider: daha geniş bir üst sınır, yaklaşık 240px derinlik ve ekranın tamamını kaplayan metnin kenarlığa asla değmemesini sağlayacak yeterli dolgu.

Yeniden Oluşturmadan Özel Sınıf Kuralları

Nicepage; yazı tipi, dolgu, kenarlık ve ilgili özellikler dahil olmak üzere standart görünümü Form Input Styling üzerinden kapsar. Çok satırlı bir alan kendine özgü bir davranışa ihtiyaç duyduğunda, Custom CSS Code daha odaklı bir yoldur: Property Panel içinde "feedback-textarea" gibi bir sınıf atayın, ardından minimum derinliği, dikey yeniden boyutlandırmayı, odak kenarlığını ve mobil genişliği tek bir kuralla kontrol edin. Custom CSS belgeleri, kural eklemeyi ve sınıf atamayı açıklar.

Şablon seçimini alanın boşken nasıl göründüğüne göre değil, beklediğiniz metin hacmine ve birisi bu hacmi aştığında alanın nasıl davranması gerektiğine göre yapın.