Textarea Modelli CSS

Modelli CSS per textarea per risposte lunghe

Una textarea accoglie frasi complete, non un semplice nome o indirizzo email; le regole adatte a un campo a riga singola risultano quindi troppo anguste. Ciò che un modello definisce concretamente è l'area di scrittura: l'altezza iniziale del campo, la disposizione del testo al suo interno, l'ampiezza di ridimensionamento e i cambiamenti al focus.

Un punto di partenza affidabile assegna al campo l'intera larghezza disponibile, un limite massimo vicino a 640px, un'altezza minima di circa 140px, un padding attorno a 12px per 14px, un bordo sottile grigio con raggio contenuto, tipografia ereditata, un'altezza di riga di 1.5, ridimensionamento solo verticale e dimensionamento border-box.

Dimensioni, spaziatura interna, ridimensionamento e stati di focus

Ognuna di queste scelte ha una motivazione precisa:

• "min-height" apre il campo a una profondità sufficiente affinché le prime righe di una risposta rimangano visibili durante la digitazione;
• "max-width" al 100% con "box-sizing: border-box" mantiene il campo all'interno del proprio contenitore sugli schermi stretti senza spingere il layout lateralmente;
• "line-height" intorno a 1.5 mantiene leggibile una risposta lunga già durante la scrittura, non solo dopo l'invio;
• "resize: vertical" consente di ingrandire il campo impedendo lo scorrimento orizzontale che comprometterebbe la colonna circostante;
• Un contorno di focus ben visibile o un colore del bordo più accentuato evidenzia il campo attivo, elemento essenziale per chi naviga da tastiera.

Due compromessi meritano attenzione. Un'altezza fissa elevata risulta generosa su desktop ma ingombrante su smartphone, per cui un'altezza minima combinata con una larghezza percentuale rappresenta una scelta più sicura. Inoltre, "resize: none" protegge il layout, ma blocca chi scrive una risposta più lunga del previsto; un'altezza massima con overflow verticale automatico risolve il problema con maggiore praticità.

Tre varianti di stile pratiche

Un riquadro di feedback compatto può mantenere un'altezza minima di 90px con un padding più ridotto, dato che due o tre frasi rappresentano il limite tipico. Una richiesta di assistenza necessita di 180px, un'interlinea più ariosa e un'altezza massima, così che un log incollato scorra anziché deformare il layout. La descrizione di un progetto richiede ancora più spazio: un limite massimo più ampio, circa 240px di altezza e imbottitura sufficiente affinché il testo non tocchi mai il bordo.

Regole per classi personalizzate senza ricostruire da zero

Nicepage gestisce l'aspetto ordinario tramite Form Input Styling, inclusi font, riempimento, bordi e relative proprietà. Quando un campo multilinea richiede un comportamento specifico, Custom CSS Code rappresenta la soluzione più mirata: assegna una classe come "feedback-textarea" nel Property Panel, quindi applica una singola regola per gestire altezza minima, ridimensionamento verticale, bordo al focus e larghezza su dispositivi mobili. La documentazione su Custom CSS illustra come aggiungere regole e associare classi.

Scegli un modello in base alla quantità di testo prevista e al comportamento desiderato quando viene superata tale soglia, non al semplice aspetto del campo vuoto.