Textarea Szablony CSS

Szablony CSS dla długich odpowiedzi w polu tekstowym

Pole tekstowe gromadzi zdania, a nie imię i nazwisko ani adres e-mail, więc reguły obowiązujące dla pola jednowierszowego pozostawiają je ciasne. Szablon tak naprawdę ustala obszar pisania: jak głęboko pole się otwiera, jak tekst się w nim mieści, jak daleko można go przeciągnąć i co zmienia się po naciśnięciu fokusa.

Solidny punkt wyjścia zapewnia pole o pełnej szerokości, wysokości około 640 px, minimalnej wysokości około 140 px, odstępie około 12 px na 14 px, cienkiej szarej ramce o małym promieniu, odziedziczonej typografii, wysokości linii 1,5, możliwości zmiany rozmiaru tylko w pionie i rozmiaru ramki.

Rozmiar, odstęp, zmiana rozmiaru, stany fokusa

Każda z tych decyzji ma swoje uzasadnienie:

• „minimalna wysokość” otwiera pole na tyle głęboko, że pierwsze wiersze odpowiedzi pozostają widoczne podczas pisania;

• „max-width” na 100% z „box-sizing: border-box” utrzymuje pole wewnątrz kontenera na wąskich ekranach, zamiast przesuwać układ na boki;

• „line-height” na poziomie 1,5 sprawia, że długa odpowiedź jest czytelna podczas pisania, a nie tylko po wysłaniu;
• „resize: vertical” pozwala na powiększanie pola, blokując jednocześnie przeciąganie na boki, które przerywa otaczającą kolumnę;
• Widoczny kontur fokusa lub mocniejszy kolor obramowania pokazują, które pole jest aktywne, co jest najważniejsze dla użytkowników klawiatury.

Warto wymienić dwa kompromisy. Wysoka, stała wysokość wygląda na dużą na komputerze stacjonarnym i topornie na telefonie, więc minimalna wysokość plus procentowa szerokość jest bezpieczniejsza. „resize: none” chroni układ, ale jednocześnie łapie każdego, kogo odpowiedź jest dłuższa niż przewidywano; maksymalna wysokość z automatycznym przepełnieniem pionowym rozwiązuje ten problem lepiej.

Trzy praktyczne warianty stylu

Kompaktowe pole informacji zwrotnej może pozostać w pobliżu minimalnej głębokości 90 px z węższym odstępem, ponieważ dwa lub trzy zdania stanowią jego realistyczny limit. Zapytanie o pomoc techniczną wymaga 180 px, mniejszej wysokości wiersza i maksymalnej wysokości, tak aby wklejony log przewijał się, a nie rozciągał układu. Opis projektu idzie dalej: szerszy limit, około 240 px głębokości i wystarczające odstępy, aby pełny ekran nigdy nie dotykał obramowania.

Reguły niestandardowych klas bez przebudowy

Nicepage obejmuje rutynowy wygląd poprzez stylizację danych wejściowych formularza, w tym czcionkę, wypełnienie, obramowanie i powiązane właściwości. Gdy pole wielowierszowe wymaga własnego zachowania, niestandardowy kod CSS jest węższym rozwiązaniem: przypisz klasę, taką jak „feedback-textarea” w panelu Właściwości, a następnie zastosuj pojedynczą regułę, aby kontrolować minimalną głębokość, zmianę rozmiaru w pionie, obramowanie fokusu i szerokość w wersji mobilnej. Dokumentacja Custom CSS wyjaśnia, jak dodawać reguły i przypisywać klasy.

Wybierz szablon na podstawie oczekiwanej objętości tekstu i tego, jak pole powinno się zachowywać, gdy ktoś ją przekroczy, a nie na podstawie tego, jak wygląda, gdy jest puste.