Textarea Modelli CSS

Modelli CSS per Textarea per risposte lunghe

Una textarea raccoglie frasi, non un nome o un indirizzo email, quindi le regole adatte a un campo a riga singola lo rendono troppo stretto. Un modello, invece, definisce l'area di scrittura: quanto si apre il campo, come si dispone il testo al suo interno, quanto può essere trascinato e cosa cambia quando riceve il focus.

Un buon punto di partenza prevede che il campo abbia una larghezza completa, un limite superiore di circa 640px, un'altezza minima di circa 140px, un padding di circa 12px per 14px, un sottile bordo grigio con un piccolo raggio, la tipografia ereditata, un'altezza di riga di 1,5, il ridimensionamento solo verticale e la dimensione del bordo.

Dimensioni, padding, ridimensionamento, stati di focus

Ognuna di queste scelte ha una sua ragione d'essere:

• "min-height" apre il campo a sufficienza da mantenere visibili le prime righe di una risposta mentre viene scritta;

• max-width al 100% con box-sizing: border-box mantiene il campo all'interno del suo contenitore su schermi stretti, evitando che il layout si sposti lateralmente;

• line-height vicino a 1,5 mantiene leggibile una risposta lunga durante la digitazione, non solo dopo l'invio;

• resize: vertical permette di ingrandire il campo bloccando lo spostamento laterale che interrompe la colonna circostante;

• Un contorno di focus visibile o un bordo di colore più intenso indicano quale campo è attivo, aspetto fondamentale per chi usa la tastiera.

Vale la pena menzionare due compromessi. Un'altezza fissa elevata appare eccessiva su un desktop e goffa su uno smartphone, quindi un'altezza minima più una larghezza percentuale è una soluzione più sicura. Inoltre, resize: none protegge il layout, ma blocca chiunque scriva una risposta più lunga del previsto; un'altezza massima con overflow verticale automatico risolve questo problema in modo più elegante.

Tre varianti di stile pratiche

Un box di feedback compatto può avere una profondità minima di circa 90px con un padding più stretto, dato che due o tre frasi rappresentano il suo limite realistico. Una richiesta di supporto merita 180px, un'interlinea più ampia e un'altezza massima, in modo che un log incollato scorra invece di allungare il layout. Un brief di progetto va oltre: un limite superiore più ampio, circa 240px di profondità, e un padding sufficiente affinché la visualizzazione a schermo intero non tocchi mai il bordo.

Regole di classe personalizzate senza ricompilare

Nicepage gestisce l'aspetto di base tramite lo stile dei campi di input dei moduli, inclusi font, riempimento, bordo e proprietà correlate. Quando un campo multilinea necessita di un comportamento specifico, il codice CSS personalizzato è la soluzione più precisa: assegna una classe come "feedback-textarea" nel pannello Proprietà, quindi applica una singola regola per controllare la profondità minima, il ridimensionamento verticale, il bordo di focus e la larghezza per dispositivi mobili. La documentazione CSS personalizzato spiega come aggiungere regole e assegnare classi.

Scegli un modello in base al volume di testo previsto e a come il campo dovrebbe comportarsi quando qualcuno supera tale limite, non in base al suo aspetto quando è vuoto.