Textarea CSS-sjablonen

CSS-sjablonen voor tekstvelden met lange antwoorden

Een tekstveld verzamelt zinnen, geen naam of e-mailadres, dus de regels die geschikt zijn voor een veld met één regel zijn te beperkt. Wat een sjabloon echt bepaalt, is het schrijfgebied: hoe diep het veld opent, hoe de tekst erin staat, hoe ver het kan worden versleept en wat er verandert bij focus.

Een betrouwbaar uitgangspunt geeft het veld een volledige breedte, een bovengrens van ongeveer 640px, een minimale hoogte van ongeveer 140px, een opvulling van ongeveer 12px bij 14px, een dunne grijze rand met een kleine radius, overgenomen typografie, een regelhoogte van 1,5, alleen verticaal formaat wijzigen en een randbox-formaat.

Grootte, opvulling, formaat wijzigen, focusstatus

Elk van deze keuzes is om een bepaalde reden gemaakt:

• "min-height" opent het veld diep genoeg zodat de eerste regels van een antwoord zichtbaar blijven tijdens het typen;

• "max-width" op 100% met "box-sizing: border-box" zorgt ervoor dat het veld binnen de container blijft op smalle schermen, in plaats van dat de lay-out zijwaarts wordt verschoven;

• "line-height" rond de 1,5 zorgt ervoor dat een lang antwoord leesbaar blijft tijdens het typen, niet alleen na het verzenden;

• "resize: vertical" laat gebruikers het veld vergroten en voorkomt dat zijwaarts slepen de omringende kolom verstoort;

• Een zichtbare focusrand of een sterkere randkleur geeft aan welk veld actief is, wat vooral belangrijk is voor toetsenbordgebruikers.

Twee compromissen verdienen vermelding. Een hoge, vaste hoogte oogt ruim op een desktop en onhandig op een telefoon, dus een minimale hoogte plus een breedte in percentages is veiliger. En "resize: none" beschermt de lay-out, maar kan een probleem vormen voor gebruikers wiens antwoord langer is dan verwacht; een maximale hoogte met automatische verticale overloop lost dit probleem beter op.

Drie praktische stijlvarianten

Een compact feedbackvak kan een minimale diepte van ongeveer 90px behouden met een kleinere opvulling, aangezien twee of drie zinnen de realistische bovengrens vormen. Een ondersteuningsverzoek verdient een regelafstand van 180px, een ruimere regelafstand en een maximale hoogte, zodat een ingevoegd logboek scrollt in plaats van de lay-out uit te rekken. Een projectbrief gaat nog een stap verder: een bredere bovengrens, een diepte van ongeveer 240px en voldoende opvulling zodat een volledig scherm de rand nooit raakt.

Aangepaste klasseregels zonder de lay-out opnieuw op te bouwen

Nicepage behandelt de standaardweergave via formulierinvoerstijlen, inclusief lettertype, opvulling, rand en gerelateerde eigenschappen. Wanneer een veld met meerdere regels een eigen gedrag vereist, is aangepaste CSS-code de meest efficiënte oplossing: wijs een klasse toe, zoals "feedback-textarea", in het eigenschappenpaneel en pas vervolgens één regel toe om de minimale diepte, verticale aanpassing, focusrand en breedte op mobiele apparaten te bepalen. De documentatie over aangepaste CSS legt uit hoe u regels kunt toevoegen en klassen kunt toewijzen.

Kies een sjabloon op basis van de verwachte hoeveelheid tekst en hoe het veld zich moet gedragen wanneer iemand die hoeveelheid overschrijdt, niet op basis van hoe het eruitziet wanneer het leeg is.